iT邦幫忙

2

npm run 開發環境安裝問題!生產環境架設?

  • 分享至 

  • xImage

想問問開發環境安裝的問題
就是像 vue 這種框架,只要 npm run serve 他就可以自動產生 port 直接可訪問(本端開發時)
不需要透過 nginx 再另外設定
這是實際可以自己做的事嗎?還是安裝框架才會有的東西?
包括 laravel 也是直接 run 就可以產生 port 根本不需要透過 nginx
以及 vue 在本端 npm run build 就會產生編譯後的 dist ,這個時候才可以丟在 nginx 上跑
甚至可以寫個腳本,當透過 git push 專案到 master 時,伺服器可以自己部署(跑 pm run build)!?
有大大可以簡易講解嗎?
萬分感激!

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
4
dragonH
iT邦超人 5 級 ‧ 2020-09-29 15:21:57
最佳解答

就是像 vue 這種框架,只要 npm run serve 他就可以自動產生 port 直接可訪問(本端開發時)
不需要透過 nginx 再另外設定
這是實際可以自己做的事嗎?還是安裝框架才會有的東西?

打開你的 package.json

你會看到

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

npm run serve 就是跑上面的 serve

包括 laravel 也是直接 run 就可以產生 port 根本不需要透過 nginx

但是你不會想在 production 用 npm run serve

因為那個 server 只是 for dev

nginx 能做到的他基本上都沒有

以及 vue 在本端 npm run build 就會產生編譯後的 dist ,這個時候才可以丟在 nginx 上跑
甚至可以寫個腳本,當透過 git push 專案到 master 時,伺服器可以自己部署(跑 pm run build)!?

跨謀

感覺是想問 CI/CD

如果是想用 github

可以去玩玩 github action

參考

看更多先前的回應...收起先前的回應...
火爆浪子 iT邦研究生 1 級 ‧ 2020-09-29 15:26:39 檢舉

哦我那個問題是
假設本端不需要透過 nginx 就可以產生port開發
那假設要透過github部署到伺服器上呢
以往我的做法是把原始碼丟到github後
再登入伺服器設定好nginx和路徑
再到該目錄下git pull 下來運行
我的疑問是在伺服器那塊會怎麼架設生產環境?

咖咖拉 iT邦好手 1 級 ‧ 2020-09-29 15:34:45 檢舉

WEB 的port 都是80 或443
能隨便的設定port 只有在dev環境才可以
server 的port除非自己條不然都很固定

通靈亡 iT邦高手 1 級 ‧ 2020-09-29 15:48:48 檢舉

補充一下大大的回答

假設本端不需要透過 nginx 就可以產生port開發

那是在你的電腦架一個 Webpack Dev Server
你可以參考我這次鐵人賽寫的這篇,會對Dev Server比較了解
https://ithelp.ithome.com.tw/articles/10241951

那假設要透過github部署到伺服器上呢

Vue的官方文件說明有提到一個做法
你可以寫一個腳本程式(.bat或.sh)

https://cli.vuejs.org/zh/guide/deployment.html#github-pages

接著在專案的package.json自定一個指令,執行你打包+佈署的腳本程式,即可實現自動佈署的需求,例如:

"scripts": {
   "build": "./build.sh"
},
dragonH iT邦超人 5 級 ‧ 2020-09-29 16:21:00 檢舉

那假設要透過github部署到伺服器上呢

所以我說你先去玩玩 github action

他可以做到你 commit 時

做你想做的事

1

認真來說,只要是可以接受封包資料的任何一個應用程式。都可以拿來做web server。
nginx其中其中一個而已。

dragonH 就有提到,vue有自已的測試server可以啟用。
其實其它還有像是 Webpack Dev Server

講白的,那就是簡易式的server。跟用nginx、appche一樣的東西。
只是一般比較正式的server應用,會需要比較多的設定及調整。

而dev server其目的只是為了開發時方便。不需要調整有的沒有的東西。
啟用就好。

這對不太會架主機的人,是一個很方便的東西。還可以拿來當debug或是給編輯器使用。

我個人在使用上並沒有使用dev server。還是直接將程式放在nginx的run。
不過像是需要跑node的前端。就得另外處理了。(這又是另外一回事了)

通靈亡 iT邦高手 1 級 ‧ 2020-09-30 11:36:58 檢舉

路過補充一下星空大大的回答

vue有自已的測試server可以啟用。

其實Vue CLI 專案的 Dev Server 底層也是使用 Webpack Dev Server + HMR,在Vue官方文件有提到:
https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

另一方面,Dev Server 上的網頁和程式碼並不是最佳化的結果 (像是 Uglify & Minify),正式的網站還是要用npm run build產出的檔案佈署

0
wolfwang
iT邦研究生 4 級 ‧ 2020-09-30 16:33:20

1)可以了解一下 nuxt,如果想用 Vue 來做服務的話

2)依照你的構想,先拋開其他問題,的確是可以讓它跑 productoin 然後改用 80 port。但下一步,如果你要跑 https 呢?如果 server 上有其他服務已經先一步佔用了 80/443 port,那你要怎麼處理呢?讓 web server 去做這些事簡單、穩定也更強大。

3)我自己的經驗是可以用 Nginx 放在前面,然後 proxy 的方式指向 upsrteam (可參考 https://nuxtjs.org/faq/nginx-proxy/) , 也就是 vue 跑起來的 server,這時它就可以任意指定未用過的 port,然後為了避免它掛掉,要用 pm2 去維持它的執行

4)至於自動部署的方式,我自己的做法是透過 commit 到特定 branch 時(testing、production),透過 web hook 去啟動編譯主機,從 git server 抓回更新、跑 npm run build 之後,再把 dist 的內容同步到正式或測試主機上。這個設計是因為 build 很耗資源,為了不影響主機的效能所以拆開來。

我要發表回答

立即登入回答