前端項目部署到雲服務器

前端項目準備

咱們須要在 package.json 裏面添加一行
"homepage": ".",
若是不加上這個的話
以後打包的時候,打開index.html會報錯
項目完成之後，運行 npm run build 進行打包
例如打包以後的文件夾爲 build

雲服務器設置

首先進入服務器，而後安裝 nginx
推薦 yum 源安裝

安裝 nginx 服務器

ssh root@yourIp    // 首先打開命令行，連上你的服務器

yum install -y nginx    // 命令安裝 nginx 服務器

配置nginx

安裝完成後，進入 nginx 配置文件目錄 通常是 /etc/nginx/ 下
在該目錄下新建一個 vhost 文件夾做爲你本身的配置文件目錄
而後進入 vhost 新建一個配置文件，好比 example.conf
輸入以下配置

server {
   listen      5000;    // 端口號能夠本身設置
   server_name  localhost;
   root /usr/local/reactProjects/yourReactProject;    // 注意這是裏放你上面 build 文件夾裏的內容
   location / {
      try_files $uri @fallback;
   }
   location @fallback {
     rewrite .* /index.html break;
   }
   error_page   500 502 503 504  /50x.html;
   location = /50x.html {
     root   html;
   }
}​

注意: /usr/local/reactProjects/yourReactProject 路徑只是舉個例子，你能夠放在其餘目錄下
另外，上傳文件到雲服務器能夠用 xftp 或者其餘的軟件
再輸入 vi nginx.conf 添加下圖劃紅線部分代碼，把你的配置 include 進來

到此簡易版的 nginx 就配置好了
這裏暫不考慮反向代理等複雜配置

啓動

輸入 systemctl start nginx 開啓 nginx 服務

瀏覽器上輸入 yourIpAdress:5000/ 即可以訪問你的頁面了

另外 systemctl status nginx 能夠查看 nginx 的運行狀態

以及 systemctl stop nginx 能夠關閉 nginx 服務