[Docker]制作一个可以运行Vue的镜像

• Vue构建过程是使用npm将Vue项目打包成静态html，并放到同目录的/dist文件夹下。因此在Docker容器中，我们需要nodejs环境并下载项目所需的依赖

  • 优化：使用了cnpm作为国内镜像源。npm run [scripts]详见package.json中的scripts，这里的打包命令实际上是运行了vue-cli-service build。

  • 我们选择使用Nginx来展示静态页面，因此我们将打包后的文件放到Nginx的基础镜像中。这里额外将nginx的配置文件也从Vue项目里复制出来（因此事先要准备好一个配置文件）。

  • 最终效果：通过该DockerFile可以构建一个Vue项目的镜像

    FROM node:15.11.0 as builder
    ARG MY_HOME=/usr/src/app
    COPY . $MY_HOME
    WORKDIR $MY_HOME
    RUN npm install cnpm --registry=https://registry.npm.taobao.org \
        && cnpm install \
      && npm run build
        
    FROM nginx:1.19-alpine as prod
    COPY --from=builder $MY_HOME/dist /usr/share/nginx/html
    COPY --from=builder $MY_HOME/nginx.conf /etc/nginx/conf.d
    

• 在实际前后端分离的项目中需要注意一个nginx的配置，因为Vue项目可能向后端api发送请求，因此需要将/api转发到后端。

MINE MIND系列将在我的GitHub上实时更新，同时精选部分汇总于CSDN专栏
GitHub仓库：https://github.com/IcyLeaves/MINE-MIND
CSDN专栏：https://blog.csdn.net/qq_37398834/category_10975647.html