將React專案部署在heroku上展示

2021-09-11 11:56:02 字數 1531 閱讀 4349

『 文章首發於github blog 』

先放上目錄結構

.

├── license

├── readme.md

├── package-lock.json

├── package.json

├── react-ui

│   ├── license

│   ├── readme.md

│   ├── build

│   ├── config

│   ├── doc

│   ├── node-proxy

│   ├── package.json

│   ├── public

│   ├── scripts

│   ├── src

│   └── tsconfig.json

└── server

└── index.js

複製**

簡單來說,就是外面的package.json對node的包,react-ui資料夾對應的是整個react專案。

在我的專案中外面的package.json如下

,

"scripts": ,

"cachedirectories": [

"node_modules",

"react-ui/node_modules"

],"dependencies": ,

"repository": ,

"keywords": [

"node",

"heroku",

"react"

],"license": "mit",

"devdependencies": {}

}複製**

對heroku起作用的是以下兩句

"scripts": ,

複製**

heroku在檢測到這是乙個nodejs專案後,會自動執行npm start,開啟**服務

這裡的heroku-postbuild用到了npm的post-鉤子,在安裝完依賴後,在npm start之前,heroku環境下應該會執行npm run heroku,此時會呼叫heroku-postbuild這個命令。官方解釋在此

還有

"cachedirectories": [

"node_modules",

"react-ui/node_modules"

],複製**

複製**

重點是這兩句話,第一句是指定埠,如果是在heroku中部署的話,埠是動態分配的,所以要使用process.env.port,本地的話自動變為8081。 第二句是指定靜態檔案的位置。

把上述檔案配置好之後,推送到heroku,再heroku open就可以啦

Vue專案部署在IIS

發布vue專案,生成dist資料夾 開啟iis伺服器後選中 後右擊選 新增 物理路徑指向發布生成的dist資料夾 到此專案就部署好了,點選右側瀏覽即可開啟 你以為部署完成就可以了,遇到的問題才剛開始 沒錯,開發環境下沒問題的專案,在通過以上發布部署後報錯了,先歸納了下出現的錯誤 1 提示vue is...

將Django專案部署到nginx uwsgi上

首先利用wsgi協議,將專案部署到uwsgi上 1.uwsgi的安裝 pip install uwsgi2.uwsgi的配置專案部署時,需要把settings.py資料夾下的 debug false allowed hosts 在專案目錄下新建uwsgi.ini檔案 uwsgi 使用nginx連線時...

WebStorm 將專案部署到 IIS

在webstorm中開啟專案,通常會啟動乙個虛擬伺服器,並使用63342埠,位址為 http localhost 63342 test 05 configure pop ups.html 這樣會造成區域網內的其他裝置不能訪問這個位址,給開發和除錯帶來了不便。把專案 直接發布到伺服器上,直接通過伺服器...