小白学习vue服务端渲染（三）-- docker部署服务端项目

编写Dockerfile

在项目根目录下新建docker-vue-ssr目录，该目录结构如下：

docker-vue-ssr  
├── vue-ssr  
│ ├── dist # 打包后的dist目录           
│ ├── index.template.html          
| ├── package.json        
│ └── server.js           
└── Dockerfile 

编写Dockerfile文件，内容如下：

# node版本最好和开发环境的版本保持一致。我的开发环境的版本是12.16.0
FROM node:12.22.7
WORKDIR /usr/local/docker/docker-vue-ssr/vue-ssr
COPY . /usr/local/docker/docker-vue-ssr
RUN cd /usr/local/docker/docker-vue-ssr/vue-ssr
RUN npm install
EXPOSE 3000
# 因为下面的cmd命令是使用node直接运行server.js的，而server.js中存在process.env.NODE_ENV === 'production'，所以要提前在这里将node环境设置成'production'
ENV NODE_ENV production

CMD [ "node", "server.js" ]

之后，打包项目，将dist目录复制到/docker-vue-ssr/vue-ssr目录下。

服务器打包vue-ssr的镜像

将docker-vue-ssr复制到服务器的相应目录，我这里放到了/usr/local/docker目录下，因为我的docker宿主机映射都放到了这里.

进入/docker-vue-ssr目录，因为Dockerfile在该目录下：

cd /usr/local/docker/docker-vue-ssr

然后进行镜像打包：

docker build -t vue-ssr:0.1 .

命令解析：

• docker build --> 构建docker镜像的命令
• -t --> tag的缩写，镜像命名，后面紧跟着打包好的镜像名称
• vue-ssr:0.1 --> 打包好的镜像名称，前面是镜像名，冒号后面是镜像版本号
• . --> 表示Dockerfile所在目录，因为进入了Dockerfile所在目录，所以用"."

打包好，查看镜像

docker images

部署docker容器

因为vue-ssr项目使用的端口是3000，打包镜像的时候，暴露的端口也是3000，所以部署的容器，要被映射的端口也是3000。

docker run --name vue-ssr -p 3000:3000 -d vue-ssr:0.1

命令解析：

• docker run --> 创建并运行容器
• --name --> 容器命名，后面紧跟着容器的名称
• vue-ssr --> 容器名称
• -p --> 端口映射
• 3000:3000 --> 映射成宿主机的端口:镜像端口
• -d --> 守护状态运行，即让容器在后台运行而不是将执行命令的结果直接输出在当前宿主机
• vue-ssr:0.1 --> 基于哪个镜像创建容器，镜像名称:版本号(默认lastest)

nginx反向代理

编辑nginx的defalut.conf文件，添加如下内容：

# 地址是/vue-ssr，需要将vue-router的每个路由地址添加上/vue-ssr前缀
location /vue-ssr {
    proxy_pass http://ip:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
}

# 代理项目的dist目录，因为dist是静态文件
location /dist {
    proxy_pass http://ip:3000/dist;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header X-real-ip $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
}

至此，项目部署完成。