前端項目(react)部署到服務器

項目開發部署流程

1. 創建項目開發
2. 開發完成后，對項目進行打包
3. 上傳打包文件到服務器指定目錄
4. 配置nginx進行轉發即可

以react項目為例

• 創建項目

// 通過create-react-app來創建一個react項目
npx create-react-app my-app

• 打包

// 項目打包，生成build或者dist文件
npm run build

• 項目上傳到服務器

通過ftp之類的工具把打包后的文件上傳到服務器指定目錄即可。常見的scp(linux)， Filezilla(windows)

• nginx配置

打包后的文件放在了服務器的/www/wwwroot/目錄下，最終的訪問路徑為/www/wwwroot/build/index.html

// nginx配置如下

server
{
    listen 5000;
    server_name 120.53.247.128;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/build/;
    autoindex on;
    
    
    
    location / {
        # root   /www/wwwroot;
        alias /www/wwwroot/build/;
        index index.html index.htm;
        #rewrite /config  /www/wwwroot/build/index.html;
        try_files $uri $uri/ /index.html;
     }
     
     location /api {
        proxy_pass http://.baidu.com;
     }

    
    #SSL-START SSL相關配置，請勿刪除或修改下一行帶注釋的404規則
    #error_page 404/404.html;
    #SSL-END
    
    #ERROR-PAGE-START  錯誤頁配置，可以注釋、刪除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END
    
    #PHP-INFO-START  PHP引用配置，可以注釋或修改
    include enable-php-00.conf;
    #PHP-INFO-END
    
    #REWRITE-START URL重寫規則引用,修改后將導致面板設置的偽靜態規則失效
    include /www/server/panel/vhost/rewrite/120.53.247.128.conf;
    #REWRITE-END
    
    #禁止訪問的文件或目錄
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }
    
    #一鍵申請SSL證書驗證目錄相關設置
    location ~ \.well-known{
        allow all;
    }
    
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log off;
    }
    
    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log off; 
    }
    access_log  /www/wwwlogs/120.53.247.128.log;
    error_log  /www/wwwlogs/120.53.247.128.error.log;
}

注意的點

1. 端口號我這里設置的5000，需要在服務器的防火牆配置端口可訪問

2. 如果出現了配置完nginx后，出現了403，可能是需要設置一下autoindex屬性

nginx配置后訪問顯示403

3. 假如你服務器的IP為http://120.53.247.128/，但是你需要請求的服務器地址為http://www.baidu.com/api/getUserInfo，在本地開發的是同通過webpack proxy配置代理，在線上就需要配置一下nginx proxy_pass進行轉發了

location /api {
      proxy_pass http://www.baidu.com;
 }

4. 假如你的項目目錄為/www/wwwroot/build/index.html，你在配置location時，就需要這樣來配置。記住有時候配置為root /www/wwwroot/build/，刷新nginx后發現沒有生效，這時候你可以試試alias來看看

location / {
        # root   /www/wwwroot/build/;
        alias /www/wwwroot/build/;
        index index.html index.htm;
        #rewrite /config  /www/wwwroot/build/index.html;
        try_files $uri $uri/ /index.html;
}