Vue.js + Docker 部署

该配置也适用于其它 gulp、webpack 类型的项目（须要经过node.js打包成静态文件并部署到服务器的）

脚手架建立vue项目（示例用）

建立一个demo项目。

vue init webpack demo01
复制代码

写dockerfile配置文件

完整的dockerfile文件

放在项目的根目录。

Dockerfile

FROM node:8-slim
RUN apt-get update && apt-get install -y nginx WORKDIR /usr/src/app COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"] RUN npm install COPY . . RUN npm run build RUN ln -sf /dev/stdout /var/log/nginx/access.log \ && ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80
RUN cp -r dist/* /var/www/html \ && rm -rf /user/src/app CMD ["nginx","-g","daemon off;"] 复制代码

dockerfile文件配置详解

基础镜像node,以及安装nginx。

FROM node:8-slim
RUN apt-get update && apt-get install -y nginx 复制代码

在镜像中建立目录/usr/src/app以及进入到该目录中。用来临时存放项目代码。

WORKDIR /usr/src/app 复制代码

下载node依赖。

# 拷贝三个依赖相关的json文件到 "/usr/src/app" 目录下

COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"] 
# 下载依赖
RUN npm install 复制代码

拷贝项目全部文件到 /usr/src/app 目录下。（这里选择了先下载依赖，再拷贝项目的全部文件到镜像中。）

COPY . . 复制代码

运行打包命令

RUN npm run build 复制代码

将nginx的日志软链接到了标准输出和标准错误。这样能够经过 docker logs 查看nginx的日志。

RUN ln -sf /dev/stdout /var/log/nginx/access.log \ && ln -sf /dev/stderr /var/log/nginx/error.log EXPOSE 80
复制代码

移动打包后的文件到 nginx的 html目录下。并将项目源文件移除(没有用了，要的只是打包后的静态文件)。

RUN cp -r dist/* /var/www/html \ && rm -rf /user/src/app 复制代码

配置项目启动命令。-g 'daemon off;'配置参数将会使nginx前台运行，若是后台运行，docker容器会直接退出。

CMD ["nginx","-g","daemon off;"] 复制代码

部署

将项目移动到部署的系统中（以linux为例）,并进入到项目根目录中。

将项目打包成docker镜像。镜像名称为demo,版本号为1.0

docker build -t demo:1.0 .
复制代码

-t <镜像名称>:<版本号>

建立容器并运行。这里用的是nginx-proxy进行代理。直接打开 <域名> 便可访问。

docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0

# 能够开多个容器。nginx-proxy会自动配置负载均衡
docker run -d -p 80 -e VIRTUAL_HOST=<域名> demo:1.0
复制代码

Vue history模式处理、API代理(附加)

须要配置nginx。配置文件能够放在项目中打到镜像内，还有就是放在宿主机中映射到容器内。这里选择的是后者，方便运维操做。

在宿主机中新建配置示例文件

/root/conf/demo.conf

server {
    listen       80;
    server_name  <域名>;
    # 接口代理
    location /api {
        # .... 省略
    }
    
    # vue `history` 模式配置
    location / {
        root /var/www/html;
  		try_files $uri $uri/ /index.html;
	}
}
复制代码

改动启动命令

docker run -d -p 80 -e VIRTUAL_HOST=<域名> -v /root/conf:/etc/nginx/conf.d  demo:1.0
复制代码

-v <宿主机路径>:<容器路径>