阿里云轻量应用服务器环境搭建-Docker部署vue-cli项目

参考链接：https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx

一些环境：

• Ubuntu 18.0
• Docker 19.0

工具：

• XShell（敲命令）
• FileZilla Client（上传文件）

一个关键问题：
跨域问题，对于前后端分离项目，这是必须要面对的。我这个项目是主要在后端解决的跨域问题，但在前端也有一部分是通过webpack的proxy来解决跨域的。另外，推荐两种跨域的方式：开发环境：cors+proxy，生产环境：cors+nginx（webpack的proxy在生产环境是不能用的，要改成nginx来配置代理）。

• 在项目根目录创建 Dockerfile 文件（需要根据自己的情况更改）

  FROM node:10
  COPY ./ /leblog-web   # leblog-web请改成自己的项目名
  WORKDIR /leblog-web # leblog-web请改成自己的项目名
  RUN npm install && npm run build  # 注意自己项目的build命令，生产环境可能是npm run build:prod
  
  FROM nginx
  RUN mkdir /leblog-web # leblog-web请改成自己的项目名
  COPY --from=0 /leblog-web/dist /leblog-web # leblog-web请改成自己的项目名
  COPY nginx.conf /etc/nginx/nginx.conf
  

• 在项目根目录创建 .dockerignore 文件

**/node_modules
**/dist

• 在项目根目录创建 nginx.conf 文件（需要根据自己的情况更改）

本项目在前端也涉及解决跨域问题，本地是通过webpack的proxy解决的，但这种方式在生产环境无法使用，所以要通过nginx重新配置代理，就是在这个文件里配置的。

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    # webpack 的 proxy 在生产环境下不能使用，要通过nginx来代理
    # 正则匹配，由服务器端的leblog-web中的nginx代理过去
    location ~/group1/ { # 项目如果不涉及在前端解决跨域问题，这个location配置可以删掉
      proxy_pass http://111.222.33.444:6666;
    }
    location / {
      root   /leblog-web; # leblog-web请改成自己的项目名
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

• 将项目文件上传到与服务器的root目录下
  
• 进入项目目录构建你的 Docker 镜像

cd /root/leblog-web # leblog-web请改成自己的项目名
docker build -t leblog-web .  # 最后有个.（点）千万别忘了

注意：如果这一步报错了，尝试在上一步上传项目文件时，将node_modules也上传。因为在服务器端npm install安装一些包时可能会失败。

• 运行你的 Docker 镜像

注意：下面的命令中leblog-web请改成自己的项目名，9090是该项目的运行端口，也请改成自己的。

docker run --name leblog-web -d -p 9090:80 leblog-web

• 阿里云安全组打开9090端口
  

• 访问：http://111.222.333.444:9090/,（111.222.333.444改成自己服务器的IP地址，9090改成上面设置的端口）成功的话应该能看到自己的项目主页。

• 顺便一提，如果部署失败了，就重新来过，但要先删除失败的容器和镜像（参考链接：https://blog.csdn.net/xu_benjamin/article/details/107111758）
  例如，我上面的leblog-web部署失败，容器无法启动（可能原因是配置文件（nginx.conf或其它的什么存在语法错误），就可以按照下面的命令来删除容器和镜像，再排错后重新来过。）

docker stop leblog-web
docker rm leblog-web
docker rmi leblog-web

创作不易，喜欢的话加个关注点个赞，谢谢谢谢！