前言:这里就不介绍前端打包过程了,以及默认docker中默认安装好了nginx容器并启动。这里就直接从dist包后面开始将起

一,找到docker中的nginx容器挂载的前端文件夹,及nginx配置文件夹

我的是这个

后面前端包dist目录下的文件就是放到这个包‘html’下面

配置文件夹:

 其中default.conf就是docker中nginx的核心配置文件

二,修改前端文件配置

如果第三个文件如果使用的是代理配置 VUE_APP_BASE_API = '/prod-api'  那么就需要在nginx配置文件里面配置一下代理:

location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:9000/;
        }

cd /usr/docker/nginx/conf/conf.d

可以通过vim命令编辑配置文件,也可以直接将配置文件复制出来改好在上传到服务器

完整配置:

location / {
            root   /usr/share/nginx/html/;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
        }
		
		location /prod-api/{
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://ip:7988/;
		}

 注意如果是复制的,try_files $uri $uri/ /index.html; 这个参数一定要加上,阿里云上ip可以是内网的。root不用动它的路径。

注意:proxy_pass参数一定要写实际的ip加端口,不能写回环地址,写回环地址在docker中是找不到的

修改完配置重启nginx容器

#查询容器
docker ps -a

#重启容器 
docker restart [容器id]

三,复制前段文件到这个文件夹下面

四,测试,浏览器输入ip加端口

后端部署见:

结束!!!

Logo

快速构建 Web 应用程序

更多推荐