Docker + Nginx 部署 Vue 项目

背景

我们在部署 Vue 项目时，可以通过 webpack 打包 + nginx 的部署方法，如果加上 Docker 的话，就能让项目部署更加方便。

环境

• 系统: MacOS Mojave 10.14.6
• Docker: 18.09.2

步骤

1. 构建项目

npm run build

以一个最简单的 demo 项目为例，我们打包之后得到一个 dist 文件夹，如果只使用 nginx 的话，我们将这个 文件夹放到 nginx 对应的目录下就可以了。

2. 构建镜像

在这里，我们直接使用 nginx:latest 镜像即可。

• 创建 default.nginx 配置文件(直接在项目的根目录下)

server {
    listen       80;
    root /usr/share/nginx/html;

    gzip on;
    gzip_comp_level 6;
    gzip_types text/plain application/x-javascript text/css text/javascript;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

• 创建 Dockerfile 文件(在项目的根目录下)

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

自定义构建镜像的时候基于Dockerfile来构建。
FROM nginx 命令的意思该镜像是基于 nginx:latest 镜像而构建的。
COPY dist/ /usr/share/nginx/html/ 命令的意思是将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下。
COPY default.conf /etc/nginx/conf.d/default.conf 命令的意思是将根目录下的default.conf 复制到 etc/nginx/conf.d/default.conf，用本地的 default.conf 配置来替换nginx镜像里的默认配置。

• 构建 Vue 应用镜像

docker built -t demo .

• 查看本地镜像

docker image ls

如果看到了刚刚构建出来的 demo，即为构建成功

• 启动 Docker 容器

Docker 容器Container： 镜像运行时的实体。镜像（Image）和容器（Container）的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。容器可以被创建、启动、停止、删除、暂停等

docker run -d --name=demo -p 8000:80 demo

• 查看本地容器

docker ps

如果看到了 demo，则启动成功，通过 http://YOUR_IP:8000 即能访问你的项目。

注意事项

如果使用 nginx 的话，需要注意覆盖原先的配置文件，比如 /etc/nginx/conf.d/default.conf 和 /etc/nginx/sites-enabled/default，不然有可能会出问题。

参考链接

[手把手系列之]Docker 部署 vue 项目