nginx次級域名部署dva靜態項目!

時間 2019-12-19

標籤 nginx 次級域名部署 dva 靜態項目欄目 Nginx 简体版

原文原文鏈接

這幾天爲了部署前端項目的事情，頭都搞大了。又沒有運維的支持，全靠我這個前端開發弄，真是踩了部署的各類坑了。javascript

這裏說一下 nginx 次級域名部署基於 dvajs 開發 react 框架的靜態項目的注意要點。css

基於 dvajs 框架的開發環境搭建，這裏我就不細說了。html

編譯打包

首先咱們來看看項目編譯後 index.html 中腳本的引入前端

<link href="/index.css" rel="stylesheet"></head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="/index.js"></script>
</body>
複製代碼

不難發現引入的腳本路徑是絕對的，這就有點可怕了呀！直接可能致使線上部署出問題呀！java

nginx 配置

server {
    listen 80;
    server_name www.abc.com;
    root /項目／root地址／不帶sub;

    location ^~ /merchantStatic/ {
        root   /home/projectName/src;
        index  index.html;
    }
}
複製代碼

這裏服務器的配置直接致使咱們訪問時的地址是 www.abc.com/merchantStatic/index.htmlreact

問題描述

根據上面項目代碼編譯打包後生成的 index.html 文件代碼和 nginx 服務器的配置，如今不難發現問題所在 - index.html 裏面引入的腳本不能正常引入了。由於對應的腳本引入地址變成了 www.abc.com/index.css 和 www.abc.com/index.js，而正確的地址應該爲 www.abc.com/merchantStatic/index.css 和 www.abc.com/merchantStatic/index.js，是否是？是否是？webpack

解決問題

既然問題已經出現，並且咱們已經知道問題所在，解決問題的方案那就好說了。修改 .webpackrc 裏面的 publicPath 配置屬性爲 /merchantStatic/ 前綴目錄。nginx

修改完後從新 build 發現 index.html 裏面web

<link href="/merchantStatic/index.css" rel="stylesheet"></head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="/merchantStatic/index.js"></script>
</body>
複製代碼

是咱們指望的 url 。從新部署代碼訪問 www.abc.com/merchantStatic/index.html 沒毛病了，頁面很絲滑！！服務器