vue-cli3部署到阿里云

最近自己使用vue-cli3框架，仿照起点中文页面，参考网上一些追书神器的api和项目，自己重新做了一个阅读器，顺便打包部署到阿里云。因为是第一次部署到云，所以踩了不少坑，特此记录这个过程，防止以后采坑。

一、购买阿里云服务器

因为我是第一次购买ecs（云服务器），所以有一个低配版免费试用一个月的机会，所以就先不花钱，直接领免费的，因为对配置也不是很在意，将就着用。

二、使用Xshell和Xftp

1. 直接百度去下载Xshell和Xftp
2. 双击打开Xshell去连接云服务器
   
   主机ip就是购买的ecs的公网ip，如下图：
   
3. 配置好主机后点击链接，输入登录名和密码。刚买的服务器的账号是root，初始密码是需要自己去重置的。
   
4. 连接成功后，xshell会返回

Welcome to Alibaba Cloud Elastic Compute Service !

三、vue项目打包上传

1、通过npm run prod(这个是我自己的package.json配置的命令)打包代码，然后会生成一个dist文件。

"scripts": {
    "dev": "vue-cli-service serve",
    "prod": "vue-cli-service build",
  },

2、打开xftp，和xshell一样连接云服务器。xftp可以看到云服务器的文件目录。我将dist放在root/qidian/web这个路径下（如果文件夹不存在，可以手动创建）。如下图，左边是本地电脑文件目录，右边是云服务器目录。通过xftp可以进行文件传输。

到了这一步，我们访问公网ip还是不能看到页面的，因为我们还没配服务器代理，这里用nginx配置服务器代理。

四、nginx安装配置

1. 在Xshell终端，也就是命令行窗口，输入命令 yum install nginx ，当需要确认时输入”y“回车。
2. 安装完成后，输入 service nginx start 启动nginx服务。
3. 通过命令 nginx -t 查看nginx所在的安装目录。nginx默认会安装在 /etc/ 目录下。
4. 在命令行输入命令 cd /etc/nginx 切换到nginx目录下，再输入 cat nginx.conf 可查看当前nginx配置文件。
5. 在nginx目录下，输入 vim nginx.conf 进入nginx配置编辑模式，然后按键盘 i 键，当命令行左下角出现-- INSERT-- 的时候，通过鼠标上下键进行文件修改（建议直接将配置文件下载下来，在本地改好之后再覆盖原文件）。
6. 当完成Nginx配置文件的修改后，按键盘ESC键退出编辑模式，然后输入 :wq 并回车，保存修改并退出。
7. 修改完nginx配置文件后，需要输入 nginx -s reload 重启nginx配置。这里如果重启失败，可输入 nginx -c /etc/nginx/nginx.conf ，然后再次重启。

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;
   
    server {
        listen       80;   #服务器开放端口
        server_name  39.108.227.35;//云服务器公网ip
        #root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
		
		proxy_redirect off;
		# 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
		proxy_set_header Host $host;
		proxy_set_header  X-Real-IP  $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
		
        location  / {
			root  /root/qidian/web/dist/;		#root 是dist文件夹所在目录
			index index.html index.htm;	#默认访问路径
			try_files $uri $uri/ @router;   #如果没有使用vue-router页面路由，不需要配置try_files
        }
		
		location  /chapterapi/ {   #本地代理
			proxy_pass http://chapter2.zhuishushenqi.com/chapter/http://vip.zhuishushenqi.com/;
        }
		
		location /api/ {
			proxy_pass http://api.zhuishushenqi.com/;
        }
        
		
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

}

注意：这里监听的80端口 listen 80，所以我们还需要再阿里云控制台开放80端口，不然还是无法访问。如下图，点开安全组，添加规则就行

五、遇到的问题

1. 第一次配置nginx，不熟悉，错误地覆盖了default配置。不熟悉Linux回退，所以就简单粗暴把这个文件删掉，然后卸载nginx，重新安装。以下是安装卸载nginx的命令

yum remove nginx  //卸载
which nginx  //看下是否删除成功
yum install nginx   //安装
systemctl start nginx  //启动

2. 配置nginx代理。
   本地代理配置：

proxy: {
      '/chapterapi': {
        target: 'http://chapter2.zhuishushenqi.com/chapter/http://vip.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
          '^/chapterapi': ''
        }
      },
      '/api': {
        target: 'http://api.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                //需要rewrite重写的, 如果在服务器端做了处理则可以不要这段
          '^/api': ''
        }
      }
    }

nginx代理配置：

#proxy的配置
proxy_redirect off;
# 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:8080
proxy_set_header Host $host;
proxy_set_header  X-Real-IP  $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 

location  /chapterapi/ {  
			proxy_pass http://chapter2.zhuishushenqi.com/chapter/http://vip.zhuishushenqi.com/;
        }
		
location /api/ {
	proxy_pass http://api.zhuishushenqi.com/;
      }

注意：location 后面的是两个斜杆，proxy_pass 最后边也要加一个斜杆。具体原因可以深入了解一下nginx的location机制

参考 记录一次vue-cli项目上线到阿里云并配置Nginx服务器的经历