Docker+Nginx镜像部署 Vue 项目

@Docker + Nginx 镜像部署 Vue 项目

一、编译打包Vue项目

进入Vue项目目录，执行命令

yarn build / npm run build

生成dist文件夹

二、构建镜像

新建 Dockerfile

vi Dockerfile

// An highlighted block
#导入nginx镜像
FROM nginx
MAINTAINER soapy <soapy2018@gmail.com>
#把当前打包工程的html复制到虚拟地址
COPY dist/ /usr/share/nginx/html/
#使用自定义nginx.conf配置端口和监听，如果后面启动容器使用挂载方式可以不用执行如下两个命令
RUN rm /etc/nginx/conf.d/default.conf
ADD nginx/default.conf /etc/nginx/conf.d/
RUN /bin/bash -c 'echo init ok!!!'

nginx的主配置在容器的/etc/nginx/nginx.conf，该文件又会include配置文件/etc/nginx/conf.d/default.conf，注意这些目录都是容器的目录，不是服务器的目录。

Nginx配置

新建nginx/default.conf

vi default.conf

server {
    #