【项目上线】项目上线操作步骤

目次
1. 项目打包
2. 本地服务器摆设
2.1. 具体操作步骤
2.2. 办理刷新 404 问题
2.3. 哀求无法发送问题
3. nginx 服务器摆设
3.1. nginx 简介
3.2. nginx 配置代理练习
3.3. nginx 摆设前端项目
4. 云服务器摆设

---

1. 项目打包

• 我们开辟用的脚手架实在就是一个微型服务器，用于：支撑开辟情况、运行代理服务器等。
  
• 打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等。
  
• 打包后的文件，不再借助脚手架运行，而是必要摆设到服务器上运行。
  
• 打包前，请务必梳理好前端项目标ajax封装（哀求前缀、代理规则等）。
  

2. 本地服务器摆设

2.1. 具体操作步骤

• 第一步：预备一个本地的服务器
  

本地服务器可以用：Java、Php、Go、Node.js 等语言编写，本教程接纳是Node.js编写服务器，端口号为：8088，且已经配置了public文件夹为静态资源。
点击下载服务器：

• 第二步：进行前端项目打包
  

具体的打包命令，可以参考package.json中的scripts字段配置。

• 第三步：将打包效果交给服务器
  

将打包天生的文件内容，放到服务器的静态资源文件夹中（上文中的public文件夹）

• 第四步：测试访问前端项目
  

欣赏器访问：http://localhost:8088即可看到我们的项目，但此时会遇到两个问题：

• 页面刷新 404
  
• ajax 哀求无法发送
  

2.2. 办理刷新 404 问题

问题分析：前端项目标路由，通常分为两种工作模式，分别为：

• hash模式
  

hash 值又称锚点，通常用于指定网页中的某个位置，比方下面的网址：
央视网_世界就在眼前，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如欣赏器）中使用，是不会带给服务器的，以是使用 hash 模式时，不存在刷新 404 问题。

• history模式
  

history 去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了 404 问题。

---

办理方案一：将前端路由器工作模式改为 hash 模式 —— 不太推荐。
办理方案二：让服务器在收到未配置的GET路由时，都返回index.html即可。
方案二最终实在是把 url 中的 path，交给了前端路由去处理，具体配置如下：

1. app.get('*',(req,res)=>{
2.         res.sendFile(__dirname + '/public/index.html')
3. })

复制代码

也可以借助connect-history-api-fallback中间件完成配置

1. const history = require('connect-history-api-fallback');
3. app.use(history());
4. // 配置静态资源
5. app.use(express.static(__dirname + '/public'))

复制代码

使用connect-history-api-fallback可以让配置更灵活，比如/login临时不必要作为前端路由处理，就可以按照如下方式配置

1. app.use(history({
2.         verbose:false,
3.         rewrites:[
4.                 { from: /^\/login.*$/, to: (context) => context.parsedUrl.path },
5.         ]
6. }))

复制代码

2.3. 哀求无法发送问题

问题分析：脱离脚手架后，就没有了代理服务器，无法转发哀求到【提供数据】的服务器。
怎样办理？—— 在 Node 服务器中借助http-proxy-middleware中间件配置代理，具体配置如下：

1. // 引入createProxyMiddleware
2. const { createProxyMiddleware } = require('http-proxy-middleware')
4. // 配置代理中间件
5. app.use('/dev', createProxyMiddleware({
6.         target: 'http://sph-h5-api.atguigu.cn',
7.         changeOrigin: true,
8.         pathRewrite: {
9.                 '^/dev': ''
10.         }
11. }))

复制代码

3. nginx 服务器摆设

3.1. nginx 简介

Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳固性、丰富的功能集和低系统资源消耗而闻名，重要功能有：

• 反向代理
  
• 负载平衡
  
• 静态内容服务
  
• HTTP/2 支持
  
• SSL/TLS 支持
  
• 高速缓存
  

3.2. nginx 配置代理练习

今日头条接口地址：https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc
直接向其发送 Ajax 哀求会有跨域问题，接下来我们借助nginx办理跨域问题
配置方式一：不过滤前缀
以办理今日头条跨域为例，不干/hot-event掉前缀配置如下

1. location /hot-event {
2.   # 设置代理目标
3.   proxy_pass https://www.toutiao.com;
5.   # 允许跨域
6.   add_header 'Access-Control-Allow-Origin' '*';
7.   add_header 'Access-Control-Allow-Methods' '*';
8.   add_header 'Access-Control-Allow-Headers' '*';
9.   add_header 'Access-Control-Expose-Headers' '*';
10. }

复制代码

前端写法

1. axios.get('http://localhost:8099/hot-event/hot-board/?origin=toutiao_pc')

复制代码

配置方式二：过滤前缀
办理今日头条跨域，不干/hot-event掉前缀，nginx配置（8099 端口）

1. location /dev/ {
2.   # 设置代理目标
3.   proxy_pass https://www.toutiao.com/;
5.   # 允许跨域
6.   add_header 'Access-Control-Allow-Origin' '*';
7.   add_header 'Access-Control-Allow-Methods' '*';
8.   add_header 'Access-Control-Allow-Headers' '*';
9.   add_header 'Access-Control-Expose-Headers' '*';
10. }

复制代码

前端写法

1. axios.get('http://localhost:8099/dev/hot-event/hot-board/?origin=toutiao_pc')

复制代码

备注：使用下面配置删除上游服务器的指定响应头。

1. proxy_hide_header Access-Control-Allow-Origin;

复制代码

3.3. nginx 摆设前端项目

整体思绪：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。

• 修改nginx配置如下，注意nginx的根目次最好不是 C 盘
  

1. # 配置nginx根目录
2. location / {
3.   root   D:\dist;
4.   index  index.html index.htm;
5. }
7. # 配置代理
8. location /dev/ {
9.   # 设置代理目标
10.   proxy_pass http://sph-h5-api.atguigu.cn/;
11. }

复制代码

• 修改前端项目，让全部哀求都转发给 /dev，随后重新打包
  

1. const request = axios.create({
2.   baseURL:'/dev',
3.   timeout:10000
4. })

复制代码

• 随后直接访问nginx服务器即可，比方 nginx假如运行在8099端口，则访问：
  

1. http://localhost:8099

复制代码

• 随后会遇到刷新404问题，追加nginx配置来办理
  

1. # 配置nginx根目录
2. location / {
3.   root   D:\dist;
4.   index  index.html index.htm;
5.   try_files $uri $uri/ /index.html; # 解决刷新404
6. }
7. # 配置代理
8. location /dev/ {
9.   # 设置代理目标
10.   proxy_pass http://sph-h5-api.atguigu.cn/;
11. }

复制代码

4. 云服务器摆设

我们可以在云服务器上借助nginx完成摆设，大致流程与本地nginx摆设划一

• 关于购买云服务器，可选择：阿里云、腾讯云等。
  
• 关于操作系统，看个人风俗，Ubuntu、CentOs、RedHat、都不错。
  
• 购买完成后记得重置暗码
  
• linux 长途操作软件：Xshell、Xftp
  
• 具体配置如下：
  

• 给服务器安装nginx
  

1. yum install nginx

复制代码

• 将打包后的前端资源放在：/var/sph文件夹中。
  
• 使用Xftp配置服务器的 nginx，修改文件：/etc/nginx/nginx.config。
  

2. # For more information on configuration, see:
3. #   * Official English Documentation: http://nginx.org/en/docs/
4. #   * Official Russian Documentation: http://nginx.org/ru/docs/
6. user nginx;
7. worker_processes auto;
8. error_log /var/log/nginx/error.log;
9. pid /run/nginx.pid;
11. # Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
12. include /usr/share/nginx/modules/*.conf;
14. events {
15.     worker_connections 1024;
16. }
18. http {
19.     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
20.                       '$status $body_bytes_sent "$http_referer" '
21.                       '"$http_user_agent" "$http_x_forwarded_for"';
23.     access_log  /var/log/nginx/access.log  main;
25.     sendfile            on;
26.     tcp_nopush          on;
27.     tcp_nodelay         on;
28.     keepalive_timeout   65;
29.     types_hash_max_size 2048;
31.     include             /etc/nginx/mime.types;
32.     default_type        application/octet-stream;
34.     # Load modular configuration files from the /etc/nginx/conf.d directory.
35.     # See http://nginx.org/en/docs/ngx_core_module.html#include
36.     # for more information.
37.     include /etc/nginx/conf.d/*.conf;
39.     server {
40.         listen       80 default_server;
41.         listen       [::]:80 default_server;
42.         server_name  _;
43.         root         /usr/share/nginx/html;
45.         # Load configuration files for the default server block.
46.         include /etc/nginx/default.d/*.conf;
48.         location / {
49.           root   /var/sph;
50.           index  index.html index.htm;
51.           try_files $uri $uri/ /index.html; # 解决刷新404
52.         }
53.         # 配置代理
54.         location /dev/ {
55.           # 设置代理目标
56.           proxy_pass http://sph-h5-api.atguigu.cn/;
57.         }
59.         error_page 404 /404.html;
60.             location = /40x.html {
61.         }
63.         error_page 500 502 503 504 /50x.html;
64.             location = /50x.html {
65.         }
66.     }
67. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。