docker基础（五）-多阶段构建部署vue前端项目

一，概述

对于部署前端项目如vue项目而言，多阶段构建就是：

第一步：先把前端代码放置到指定工作目录，进行npm install ，然后在npm run build,把dist文件打包出来。
第二步：把dist文件复制到指定目录，然后配置nginx,开放端口能够访问这个项目。

二，多阶段构建部署vue前端项目

1，根目录新建nginx/default.conf

server {
    listen       80;
    server_name  localhost;

    #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;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
} 

2，根目录新建dockerfile文件

# build stage
#使用14.15.0的node版本作为运行软件
FROM node:14.15.0-alpine as build-stage
#将此目录作为工作目录
WORKDIR /app
#复制本目录下的package文件（源文件）到工作目录（目标目录）
COPY package*.json ./
#在工作目录执行npm install 
RUN npm install
#将本本录下所有文件复制到目标目录
COPY . .
RUN npm run build

# production stage
FROM nginx:stable-perl as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY --from=build-stage /app/nginx/default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3，根目录新建 .dockerignore文件

构建镜像的时候 node_modules 的依赖直接通过 RUN npm install 来安装，项目中创建一个 .dockerignore文件来忽略一些直接跳过的文件：

node_modules
npm-debug.log

4，使用dockerfile文件构建vue项目的镜像

docker build -t vuesecond .

注意要在当前项目的根目录运行，因为，-t 是给镜像命名，. 是基于当前目录的 Dockerfile 来构建镜像。

5，构建好镜像之后可以查看镜像

docker image ls

到此时我们的 Vue 应用镜像 vuesecond已经成功创建。接下来，我们基于该镜像启动一个 Docker 容器。

6，基于此镜像启动一个容器

docker run -p 3002:80 -d --name vueApp2 vuesecond

docker run 基于镜像启动一个容器
-p 3000:80 端口映射，将宿主的3000端口映射到容器的80端口
-d 后台方式运行
--name 容器名，查看 Docker 进程

7，查看现有容器列表

 查看正在运行的容器：docker ps
 查看所有容器：docker ps -a

8，浏览器访问前端项目