项目上线流程总结

发表于 |

发布必备条件

  • 一台Linux服务器（CentOS/Ubuntu）服务器

  • 一款Web服务器（Nginx/Apache/Tomcat）

  • 一个属于自己的独立域名（cn/com/org/…）

本次流程以CentOS和Nginx配置为例

webpack设置静态地址打包

  • output的publicPath从开发地址/dist/设置为线上地址：//www.yuuhei.site/dist/

服务器购买

  • 选择阿里云产品的【云服务器ECS】
  • 安全组有http（默认端口80）、https（默认端口443），linux SSH登录（默认端口22），windows远程桌面登录（默认端口3389）

链接远程服务器

  • windows下最好使用git bash，ubuntu下默认是bash控制台
  • 使用ssh user@remote_ip 连接

Web服务器的选择

  • Nginx：高性能，高并发
  • Apache：多平台，安全，流行
  • Tomcat：多用于Java做jsp解析

配置Web服务器

  • 命令行执行安装Nginx，各个linux系统的下载命令不一样，ubuntu执行sudo apt-get install nginx
  • centOS和Ubuntu的nginx的配置文件一般都在/etc/nginx下，可以使用nginx -t查看配置文件位置
  • nginx.conf文件内容的user xxx需要改为user root
  • 着重配置的是http块区域里的内容（http > server > location）

node使用官网解压包安装

  • 解压安装包
1
tar -xzvf node-v10.15.2-linux-x64.tar.xz
  • 移动文件夹到/usr/local/node
1
mv node-v10.15.2-linux-x64 /usr/local/node
  • 建立全局命令node和npm软链（全局命令一般都在/usr/local/bin/）
1
2
ls -n /usr/local/node/bin/node /usr/local/bin/
ls -n /usr/local/node/bin/npm /usr/local/bin/
  • 这时候就可以直接全局执行node和npm了

nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 改成user root
user root
# ...
http {
    listen 80;
    server_name yuuhei.site;
    root /root/www/admin-fe/dist/;
    index index.html;
    # 日志文件
    access_log /etc/nginx/logs/access.log combined;

    # 完全满足
    location = / {
        # 网站路径，存放网站的地方
        root /root/www/admin-fe/dist/;
        # 输入ip后，默认会显示哪个网址，不设置就需要手动在浏览器上访问
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location ~ .*\.html$ {
        root /root/www/admin-fe/dist/;
        index index.html index.htm;
    }

    # 满足条件，访问.do，正则匹配服务器地址
    location ~ .*\.do$ {
        proxy_pass http://www.server.com;
    }

    # 代理后端API的配置
    # 用于转发的路径标记
    location /api/ {
        proxy_pass http://192.168.0.1:8080/;###被代理的API地址
    }

    # 拒绝访问设定
    location ~ /source/.* {
    	deny all;
    }

    # 指定访问静态资源，假如加载js的路径是 http://yuuhei.cn/dist/xxx.js
    location ~ .*(js|css|png|jpg|gif)$ {
        root /root/www/admin-fe/;
    }

    # 都不满足则尝试，与 = / 有区别
    location / {
        try_files $uri $uri/ /index.html;
    }
}

部署了前端静态资源html的服务器配置nginx，达到代理请求转发的效果，例如果配置了/api/，在项目里请求的地址就是/api/xxx/xxx，且需在本地配置代理方便开发，代理配置在vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
  devServer: {
    port: 8802,
    // 设置通过localhost和127.0.0.1都可以访问
    host: '0.0.0.0',
    // webpack-dev-server出于安全考虑，默认检查hostname, 经过内网穿透之后,访问会出现Invalid Host header
    disableHostCheck: true,
    // 代理设置
    proxy: {
      // 这个仅为本地调试用
      [process.env.VUE_APP_DEV_API_URL]: {
        target: 'http://10.20.2.182:8580',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_DEV_API_URL]: ''
        }
      },
      [process.env.VUE_APP_OA_DINGDING_CRM_API_URL]: {
        target: 'http://10.10.14.98:8580',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_OA_DINGDING_CRM_API_URL]: process.env.VUE_APP_OA_DINGDING_CRM_API_URL
        }
      }
    }
  }
}

域名解析

  • www：平时输入网址的www，例如www.baidu.com
  • @：平时输入网址不输入www，例如baidu.com
  • 记录值：公网服务器的IPv4地址
  • 记录类型
    • A：将域名指向一个IPv4地址
    • CNAME：将域名指向另外一个域名（redirect）
  • 备案，服务器和域名的信息必须一致才能访问

网站工作原理

  • 输入网址
  • DNS解析，寻找对应服务器地址
  • 进行握手（HTTP会话）
  • 建立文档树，加载资源

项目index.html被缓存的解决方法

单页面的项目，就算js，css等文件做了hash的处理，在发完版后进入去的第一次，会有白屏的问题。原因就是index.html被缓存，之前的js的hash都变了，然后旧的html加载了不存在的js，导致报错白屏

重点是location / 的add_header Cache-Control "no-cache, no-store";，不设置缓存，其余的是代理的设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 server {
    listen       8161;
    server_name  xxx;
    #启用https配置
    #listen       443;
    #server_name  xxx;
    #ssl                  on;
    #ssl_certificate      cret/server.pem;
    #ssl_certificate_key  cret/server.key;
    #ssl_session_timeout  5m;
    #ssl_protocols  TLSv1 TLSv1.1 TLSv1.2;
#启用TLS1.1、TLS1.2要求OpenSSL1.0.1及以上版本，若您的OpenSSL版本低于要求，请使用 ssl_protocols TLSv1;
    #ssl_ciphers  HIGH:!RC4:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!EXP:+MEDIUM;
    #ssl_prefer_server_ciphers   on;
    autoindex on;
    index index.html;
    access_log      /data/logs/xxx

location /test/ {
       proxy_set_header Host $host:$server_port;
       proxy_set_header X-Real-IP  $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header REMOTE-HOST  $remote_addr;
       proxy_pass xxx;
    }

location / {
        try_files $uri $uri/ /index.html;
        root /data/code/prod_oa_front/oa_fe_ding_m/lsmy-oa-dingding-mobile/dist;
        add_header Cache-Control "no-cache, no-store";
        autoindex on;
   }
}