一、相关配置安装
1.1 安装Docker
1.2 Docker中拉取nginx镜像
docker pull nginx
二、Vue前端项目创建配置文件
我们需要在根目录下创建Dockerfile文件和default.conf文件。
其中default.conf文件的名称是什么无所谓，只要在配置文件中注意使用相同名称即可。
2.1 Dokcerfile文件
Dockerfile文件内容具体如下：
FROM nginx:latest
# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf
#这里镜像中的目录我们不要动，但需要保证我们编写的文件名也为default.conf，或者与你自己写的文件名对应
-
FROM nginx:latest
命令的意思该镜像是基于 nginx:latest 镜像而构建的。 -
COPY dist/ /usr/share/nginx/html/
命令的意思是将项目根目录下 dist 文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。 -
COPY default.conf /etc/nginx/conf.d/default.conf
命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。
2.2 default.conf文件
下面的配置直接照抄就好，特别注意，监听的端口号并不需要动，这里的80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口。
完整配置：
upstream my_server{
server 121.41.4.33:3000; # 后端server 地址
keepalive 2000;
}
server {
listen 80; #这里的端口号不要动，80端口指的是容器的端口，最后我们会将容器的端口映射到我们宿主服务器的端口，比如映射到8888端口
server_name 111.20.xxx.xxx; # 修改为docker服务宿主机的ip/域名
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# 这里就是和vue本地代理的意思一样，已api开头的路径都代理到本机的3000端口
location /api/ {
proxy_pass http://my_server/api;
proxy_set_header Host $host:$server_port;
rewrite ^/api/(.*) /$1 break;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
如果前端项目打包出来的base_ath路径有改动，需要在default.conf文件中的location下修改相对应的路径,比如：
三、项目打包部署到Docker
将打包项目，把dist文件夹和刚刚创建的Dockerfile,default.conf放到同一目录，并上传到服务器。
然后需要构建镜像
docker build -t 镜像名称 项目路径
比如，我的代码存放位置是/home/project/cloud-admin-client目录
docker build -t cloud-admin-client /home/project/cloud-admin-client
镜像构建好后，我们就可以拿这个镜像启动一个容器
docker run -d -p 前端项目端口:80 --name 容器名称 镜像名称
- -d 后台方式运行
- -p 8888:80 端口映射，将宿主的8888端口映射到容器的80端口
- –name 容器名 镜像名
然后我们可以使用docker ps查看当前正在运行的容器
并且使用IP地址和端口号访问当前的项目
四、防火墙设置
上面我们进行了端口映射，那就需要在服务器中开启要使用的端口，
我们可以在云服务器中的安全组进行设置。
或者使用命令设置