持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情

Docker项目部署（前端）

采用nginx挂载部署

①windows下测试Nginx挂载

！！！！！有经验的可以直接从第二步开始

首先我们下载一个nginx，下载地址：nginx.org/en/download…

直接启动nginx后输入localhost，即可访问html目录下的默认页面：

1649870621480

把默认的html文件删掉

1649870500259

本地部署测试

先来配置一下后端的调用路径，因为现在部署在本地localhost，所以在axios.js中，我们配置好链接，因为等下后端部署也是本机，所以我这里直接这样配置就好了，如下：

src\axios.js：

axios.defaults.baseURL = "http://localhost:8081"

vueblog-vue/vue.config.js

module.exports = {
publicPath: '/'
}

设置完毕之后，我们执行打包命令：

# 打包命令
npm run build

1649866291367

前端打包成dist，然后解压在nginx文件夹下的html，换成前端dist解压出来的内容

1649870654492

再次访问http://localhost即可，就变成前端首页了

防止网站刷新404，修改nginx.conf的内容，原因下文会解释

1649870966336

添加内容

try_files $uri $uri/ /index.html last;

1649871017650

②使用docker拉取Nginx镜像

docker pull nginx

1649866476790

③配置前端工程信息

本地部署测试

src\axios.js：

axios.defaults.baseURL = "http://localhost:8088"

上面配置的就是前端访问后端接口的服务。 然后前端部署还需要考虑一个问题：打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部署说明，我们添加一个vue.config.js文件，

vueblog-vue/vue.config.js

module.exports = {
publicPath: '/'
}

服务器部署测试

先来配置一下后端的调用路径，因为现在部署在服务器，所以在axios.js中，我们配置好链接，因为等下后端部署也是服务器，所以我这里直接这样配置就好了，如下：

src\axios.js：

axios.defaults.baseURL = "http://xxx.xxx.xxx.xxx:8088"

上面配置的就是前端访问后端接口的服务。 然后前端部署还需要考虑一个问题：打包之后项目资源引用路径，比如我们打包后链接是否需要带项目名称等。按照Vue官方的部署说明，我们添加一个vue.config.js文件

vueblog-vue/vue.config.js

module.exports = {
publicPath: '/'
}

当然了，publicPath默认其实是空的，也就是publicPath: ‘’，两个效果貌似其实是一样的，哈哈哈，我只是提醒一下有这回事而已，嘿嘿。

④打包前端工程获取到dist文件

设置完毕之后，我们执行打包命令：

# 打包命令
npm run build

1649866291367

⑤上传服务器

在特定文件路径解压（后期启动Nginx做前端镜像需要挂载该目录下的文件）
unzip html.zip

1649866584708

工程目录和windows下解压的没差别

Linux：

1649866630260

Windows：

1649866754369

⑥挂载前端进Nginx

方式一：只挂载前端进容器的html页面创建并启动Nginx前端镜像

docker run -d -p 8989:80 -v /root/zkdcmshtml/html:/usr/share/nginx/html nginx

解释：

-p 是为了做端口映射，Nginx都是开放80口的，现在是把容器的8989口映射成80口
-v 是为了把宿主机（也就是云服务器）下的/root/zkdcmshtml/html（上面有提到）目录下的文件挂载进容器内部的/usr/share/nginx/html，这样前端就挂载进Nginx下了

此时进入容器内部，查看/usr/share/nginx/html下的文件内容会发现就跟/root/zkdcmshtml/html一样了

1649868618732

这样部署前端会出现的问题： 部署Nginx后，刷新页面变成404

1649868147593

刷新之后nginx就找不到路由了，这是为啥，得和你们科普一下，vue项目的入口是index.html文件，nginx路由的时候都必须要先经过这个文件，所以我们得给nginx定义一下规则，让它匹配不到资源路径的时候，先去读取index.html，然后再路由。所以我们配置一下nginx.conf文件。具体操作就是找到location / ,添加上一行代码try_files $uri$ uri/ /index.html last;如下：
nginx-1.18.0/conf/nginx.conf
location / {
  root   html;
  try_files $uri $uri/ /index.html last;
  index  index.html index.htm;
}
这一行代码是什么意思呢？

try_files的语法规则：格式1：try_files file … uri，表示按指定的file顺序查找存在的文件，并使用第一个找到的文件进行请求处理，last表示匹配不到就内部直接匹配最后一个。
重启nginx之后，链接再刷新都正常啦。但是没有数据，所以我们去部署一下后端。windows环境nginx的重启我一般都是打开任务管理器直接干掉nginx进程，然后再重新双击的~~

方式二

方式二：挂载配置文件，并且挂载html页面创建并启动Nginx前端镜像（推荐）

上传刚刚修改好的nginx.conf文件上传服务器特定文件夹（这里选在/root/zkdcmshtml文件夹下）

1649869038863

注意点：

上传前检查文件的编码格式
检查nginx.conf的http下是否有include别的配置文件（以上图做参照）,需要多上传一份mime.types文件与nginx.conf在同一个文件下

上传Linux目录：

创建并启动Nginx容器

 docker run -d -p 8989:80 --name app_nginx5.22 -v /root/zkdcmshtml:/etc/nginx -v /root/zkdcmshtml/html:/usr/share/nginx/html nginx

2022.5.12 配置文件挂载nginx出问题，怀疑要挂载到/etc/nginx/conf.int文件夹 ✖

配置文件应该和网页文件在同一个文件夹当中，不然会出现镜像启动不成功的问题，以及刷新404的问题

解释：

-p 是为了做端口映射，Nginx都是开放80口的，现在是把容器的8989口映射成80口
第一个-v 是为了把宿主机下的/root/zkdcmshtml下的配置文件挂载进nginx容器内部的/etc/nginx文件夹
第二个-v 是为了把宿主机（也就是云服务器）下的/root/zkdcmshtml/html（7h上面有提到）目录下的文件挂载进容器内部的/usr/share/nginx/html，这样前端就挂载进Nginx下了

可以看到，要挂载的配置文件和html文件是在同一个文件夹的目录下的，甚至其实只需要挂载配置文件即可，似乎对于html的文件会自动根据挂载的配置文件配对上

查看容器内部的/etc/nginx文件夹内容，会发现跟/root/zkdcmshtml/html一样的

1649869867538

主要是nginx.conf和mime.type两份配置文件

注意：

若没有上传mime.type文件并且nginx.conf文件中石油include这份文件的，挂载创建启动容器会报错（补上即可）

nginx: [emerg] open() "/etc/nginx/mime.types" failed (2: No such file or directory) in /etc/nginx/nginx.conf:18

1649870083374

⑦查看挂载结果

访问网站，输入xxx.xxx.xxx.xxx:8989即可

1649868792132

Docker部署Vue前端