目录

一、前置条件

二、部署流程

三、总结 

---

一、前置条件

1. 环境：CentOS7系统（我这里是在虚拟机上搭建的）

2. 工具：Docker容器(已安装)、xshell服务器终端连接工具、xftp

3. 静态资源：Vue项目

Docker安装详见这里

二、部署流程

1. 对前端项目进行打包

npm run build 

具体打包命令参照自己项目的package.json文件 

完成后会在项目文件夹下生成dist文件

2. 创建配置文件和静态文件夹

在服务器上创建一个文件，文件夹下放html(静态资源文件)和conf文件conf下创建nginx.conf(nginx配置文件)

通过xftp将打包dist文件放入服务器中的html目录下

3.  编写nginx.conf文件

server {
    listen 80;
    server_name _;
    root /var/www/html;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";



    location / {
        root  /usr/share/nginx/html/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # Cache-Control: max-age~@~AExpires
    location ~ ^/static/(css|js|media)/ {
        expires 10y;
        access_log off;
    }
}

配置解释： 

(1) Nginx会在 /usr/share/nginx/html/dist下查找文件，这是nginx容器内的默认静态文件存放路径。

(2) index index.html 表明Nginx会查找默认的index.html文件。

(3)  try_files $uri $uri/ /index.html 按照给定的顺序检查index.html文件，并返回第一个找到的index.html文件。

 4. 创建nginx容器

docker run -d --name websit_nginx -p 88:80 \
-v ./conf:/etc/nginx/conf.d \
-v ./html:/usr/share/nginx/html \
nginx

 注意点：

(1) -p 是端口映射 88 是服务器端口，80是nginx容器内的端口。

(2) -v 是目录挂载，这样在服务器上修改静态资源和配置文件就会同步到nginx容器当中。

(3) ./conf 和 ./html是刚刚在服务器上创建的两个文件夹(我是在这两个文件的父级文件夹下执行的run命令，所以写的相对路径，也可以写自己的完整路径)

(4) /etc/nginx/conf.d 和 /usr/share/nginx/html分别是nginx容器内存放配置文件和静态资源的位置。

(5) --name 是给容器命名，websit_nginx就是给容器起的名字。

(6) -d 是让容器在后台运行。

(7) 末尾的nginx是镜像名称。

5. 查看启动的容器

docker ps

如果出现下图所示，说明启动成功，可以通过服务器ip + 88端口号(端口映射时设置)访问部署的Vue项目了。 

三、总结 

从项目打包、配置nginx.conf文件、再到Docker安装Nginx、以上就是Docker部署前端Vue项目的全部内容。上面步骤都是一步步验证过的，按照流程走基本没问题。

如果有什么疑问的话可以随时留言。

如果觉得这篇文章对您有帮助的话不妨 关注 + 收藏，方便下次不迷路。

更多内容请移步这里↓↓↓