React打包部署

筆記來自
首屏優化

前言
腳手架配置文件是隱藏的，需要先使用命令顯示，怎么顯示查看【react-router】筆記

前文已經有的配置

• 請求跨域配置，查看【react】筆記
• 熱加載的配置，查看【react-router】筆記

打包配置

• 打包默認的文件夾叫build，如何改名

// config/paths.js

module.exports = {
  // 修改這里就行的參數就行
  appBuild: resolveApp('tt'),
  ...
};

• 打包后的文件路徑有誤

// 路徑錯誤原因，查看打包文件的index.html
// <script src="/static/js/main.dbaa987b.chunk.js"></script>
// 可以看到打包出來的js的訪問路徑是 localhost/static/js/main.dbaa987b.chunk.js
// 但實際上應該是 localhost/打包的文件夾名字/static/js/main.dbaa987b.chunk.js
// 這個錯誤跟vue的腳手架錯誤是一樣的，應該把打包配置進行修改讓結果是
// <script src="/打包的文件夾名字/static/js/main.dbaa987b.chunk.js"></script>

// scripts/builds.js
const paths = require('../config/paths');
// 在引入paths的代碼后直接修改publicUrlOrPath參數
paths.publicUrlOrPath = "/tt/";
// 再次打包就可以了
// 把打包的整個文件夾丟入nginx/html文件夾里，然后修改nginx.config就行

部署

• 因為前面已經把跨域都搞定了，現在只要找個服務器把打包的文件放進去就行，常見的，最小白的服務器有nginx，可以直接在網上下載安裝包

• 解壓完nginx的安裝包之后，把dist文件放在html文件夾里，然后配置nginx.conf文件

server {
    listen       80;
    server_name localhost;  
    underscores_in_headers on;
    location  / {
	try_files $uri $uri /dist/index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
	root   html;
    }
}

• 然后雙擊啟動nginx.exe，然后打開瀏覽器訪問【http://localhost/】就可以了
• 如果有購買外網雲虛擬機，去雲虛擬機上安裝一個nginx，也是放進去直接把打包文件夾放進去，然后開啟nginx服務，訪問【http://外網ip或域名/】
• 可以同時部署無限個項目的，那就不能用根目錄了，因為根目錄只有一個，查看【nginx/nginx安裝】筆記