手把手搭建nginx服務器，部署前端代碼

時間 2019-11-07

標籤手把手搭建 nginx 服務器部署前端代碼欄目 Nginx 简体版

原文原文鏈接

第一步: 下載 nginx

nginx download官網地址html

下載後，將其解壓到本地的任一目錄下。前端

此時咱們能夠看到有以下目錄:
vue

html路徑下放置咱們前端 build好的代碼(如何build，相信各位都會)，conf下有個很是重要的文件nginx.conf，用來配置nginx服務器。react

第二步: 配置nginx服務器

打開nginx.conf文件，直接找到配置server 的地方,取消掉暫時用不到的配置，下面即是個人配置:nginx

server {
        # 啓動後的端口
        listen       8880;   
        
        # 啓動時的地址
        server_name  localhost;

        # 啓動後，地址欄輸入: localhost:8880, 默認會在html文件夾下找 index.html文件
        location / {
            root   html;
            index  index.html; 
        }
        
        # 404頁面配置，頁面一樣在html文件夾中
        error_page  404    /404.html;
        location = /404.html {
            root   html;
        }
        

        # 其餘錯誤碼頁面配置
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


        # 配置代理。因爲項目是在本地起動的，而咱們的request須要請求其餘ip地址。若是你的request連接爲localhost:8880/abc/login?name=12345,那麼下面配的就是location /abc
        location /api {
           proxy_pass   http://192.168.0.0:80;       
        }

        # 一把前端無論用vue，仍是react等框架，默認都是單頁面的，若是你的項目是多頁面的，則須要用到下面的配置。
        # 由於此時你的瀏覽器的url不是localhost:8880/#/login,而是 localhost:8880/a.html/#/login
        # 因此咱們須要將路徑中a.html指向具體的html文件夾中的文件，由於默認是index.html
        location /a.html {
          alias html;
          index a.html;
        }
        location /b.html{
          alias html;
          index b.html;
        }
}