如何把webpack打包好的代碼部署到Nginx服務器上

RiverLi 發布于2019-07-25 14:15 / 2662人閱讀

摘要：代碼被打包完成后下一步就是部署到服務器上，此文僅適合于前端代碼是部署在操作系統的服務中。如圖下前端代碼放在目錄中，目錄就是剛剛前端打包完的代碼。

在生產環境中部署前端代碼

本文章前端代碼是基于vue+webpack開發的

Nginx是一款輕量級的Web 服務器/反向代理服務器

首先，webpack配置如下

在開發過程中，我們是通過npm run dev在開發環境中運行代碼
如果要部署到生產環境中，可以運行npm run build進行上線打包

打包完成后，會發現項目中多了dist這個文件夾

執行結果和webpack的配置文件一致。

代碼被webpack打包完成后下一步就是部署到服務器上，此文僅適合于前端代碼是部署在windows操作系統的nginx服務中。
這里假設：
Windows操作系統：windows server 2008 64位
Nginx服務：nginx-1.12.2 64位

1.下載nginx-1.12.2 64位解壓，假設nginx-1.12.2放在D:nginx-1.12.2目錄中，nginx目錄結構。如圖下

2、前端代碼放在D:nginx-1.12.2html目錄中，dist目錄就是剛剛前端打包完的代碼。如圖下

3、在D:nginx-1.12.2conf目錄中，有個nginx.conf配置文件，進行編輯這個文件

4、假設前端的端口號為8082，如果端口號被占用，請修改為其它端口號。后臺服務訪問地址http://192.168.121.**:8080,

5、打開cmd控制臺，進入目錄D:nginx-1.12.2中，用start nginx命令啟動服務，然后用tasklist /fi "imagename eq nginx.exe"，查看nginx服務是否啟動。

4、如果改變配置文件時，需要用nginx -s reload 命令重啟nginx工作進程。

5、關閉服務
nginx -s stop
nginx -s quit 安全關閉
taskkill /F /IM nginx.exe > nul 關閉所有nginx服務

如果有錯漏請大家批評指出！

云服務器 GPU云服務器 web項目打包部署到服務器上把代碼上傳到服務器上把項目部署到云服務器上把網站部署到云服務器上

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/39900.html

前端項目部署

摘要：前端項目部署之前很少接觸前端項目的部署，這次為了更全面的學習就在本機上裝了一個虛擬機上，在虛擬機上練習了如何把一個寫的項目部署到這個虛擬機的服務器上。前端項目部署之前很少接觸前端項目的部署，這次為了更全面的學習就在本機上裝了一個虛擬機上，在虛擬機上練習了如何把一個 react 寫的 spa 項目部署到這個虛擬機的服務器上。由于 linux 也是剛接觸不久，所以整個過程還是遇到了很多...

Aceyclee 2019-07-25 14:21 評論0 收藏0
（小白指南）在 Linux 服務器上安裝 Nodejs、Nginx 以及部署 Web 應用

摘要：首先，的命令和并不能在全局使用。文章有意將瀏覽器不能訪問服務器的兩個問題寫出來，是因為作者在排查問題的時候，發現在服務器直接訪問的頁面，能很好地檢查排除問題在百度尋找問題答案的時候，發現這種做法也得到了不少人的肯定。前段時間要把項目部署到服務器，期間踩了不少的坑。故寫下這篇文章，從零開始把自己部署的過程都記錄下來，希望能給其他像我一樣的小白一點幫助。如果有疏漏的地方，請各位客官指出，...

glumes 2019-07-25 14:06 評論0 收藏0
vue+webpack+nginx 部署在服務器非根目錄下訪問404問題

摘要：最近想把所有的前端項目都整合在兩臺機器上，通過負載訪問如下路徑域名域名域名這樣的方式訪問按照平時的打包方式，直接將打包好的包放到服務器上服務器路徑并非平時的在中做好配置如下結果訪問域名時一片紅，各種找不到困擾了好幾天，跟孫老板各種改最后終于最近想把所有的前端項目都整合在兩臺機器上，通過負載訪問如下路徑Https://域名/gameCenter/Https://域名/member/Ht...

codergarden 2019-07-25 14:09 評論0 收藏0