---
# System prepended metadata

title: VUE專案打包 部屬至NGINX伺服器

---

Nginx server >> Vue專案打包部屬

## 1.打包Vue專案

在Vue專案內終端機下指令 `npm run build`，會生成一個叫做`dist`的資料夾在你前端專案目錄內，裡面包含前端靜態網站跟專案結構內容
![](https://hackmd.io/_uploads/HyVv7hsZT.png)

## 2.安裝nginx

下載網址：https://nginx.org/en/download.html

安裝windows版本如圖

![](https://hackmd.io/_uploads/rJceN2iZ6.png)

## 3.尋找下載位址

安裝完成後將nginx解壓縮到你要的路徑，可以把步驟1的dist檔案放在目錄同層

![](https://hackmd.io/_uploads/ryBlrhs-6.png)

## 4.修改nginx文件配置

![](https://hackmd.io/_uploads/H1HPU2iZ6.png)

個人在nginx的路徑為 `nginx-1.25.2\conf`

打開conf裡的nginx.conf檔案 個人使用notepate++ 編輯

## 5. 配置&啟動 #需要修改的地方只有 http裡server內的路由配置

![](https://hackmd.io/_uploads/BJUkY3ob6.png)

```javascript=
pid         logs/nginx.pid;

worker_processes  1;

events {
    worker_connections  1024;
    # 其他 events 相關設定...
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       8076;
        server_name  localhost;

        location / {
            root   dist; # Vue.js 應用程式的 dist 資料夾路徑
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
		location /rest {
        # 將所有 /rest 的請求代理到後端伺服器
         proxy_pass http://127.0.0.1:5059;  #此為後端接口路由 
        # 可以添加其他的代理設定，例如代理頭信息等等
    }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

```


`pid         logs/nginx.pid;`

  Nginx 啟動時，它會將主進程的 PID 寫入這個文件中。
  
  `worker_processes  1; `
  
  worker_processes 1;： 指定了 Nginx 使用的工作進程數量。設置為 1，表示只有一個工作進程。

然後在server內的配置

`listen`      為 #服務器端口 若無可去防火牆新增規則
`server_name` 為 #服務器名稱 `localhost`為本地端ip 
可在命令提示字元 輸入指令 `ipconfig`搜尋 。

`location` 如圖
root配置vue的應用程式位址 若有錯誤會跳轉道nginx預設的錯誤頁面


---啟動nginx



   step1 以系統管理員身分執行命令提示字元

![](https://hackmd.io/_uploads/rJLCansWa.png)

 step2 cd到nginx目錄

![](https://hackmd.io/_uploads/SkQWypiba.png)

step3 常用語法 & 步驟 
以下都在命令提示字元 nginx路徑內輸入指令

----可先檢查 Nginx 配置是否正確： `nginx -t`
正確會顯示ok和成功 (可能因路由或端口錯誤 導致無法開啟頁面)，所以還是要以`nginx.conf`檔案內的server配置為準。

----啟動 Nginx 服務:   `nginx.exe`
執行後會生成一個`nginx.pid`的檔案在`nginx/log`裡面，
就可以開啟`nginx.conf`裡面所配置的路由，要確保`dist`資料夾路徑正確並且裡面要有index.html相關內容，否則會跳轉到錯誤頁面。

----重新載入配置文件： `nginx -s reload`
執行此語法會更新目錄內 `nginx/log` 資料夾裡面的access & error的內容


----停止 Nginx 服務： `nginx -s stop`

執行此語法會將`nginx/log`內的`.pid`檔案刪除 等於程序終止。

## 結束 
若配置都正確但還是無法開啟網站一直跳到NGINX內的錯誤頁面。
那就是server內這間配置有問題導致，
`server {
        listen       8076;
        server_name  localhost;`

        location / {
            root   dist; # Vue.js 應用程式的 dist 資料夾路徑
            index  index.html;
            try_files $uri $uri/ /index.html;
        }
		location /rest {
        # 將所有 /rest 的請求代理到後端伺服器
         proxy_pass http://127.0.0.1:5059;  #此為後端接口路由 
        # 可以添加其他的代理設定，例如代理頭信息等等
    }`
## 6.Nginx轉換為windoes服務 
1.先下載Windows Service Wrapper工具，地址：
https://github.com/winsw/winsw/releases![](https://hackmd.io/_uploads/HJuD46hbp.png)
2.安裝完成後把`WinSW-x64.exe`把檔案移至nginx內，命名成自己想要的名稱我這邊命名為`nginx-service.exe`
3.在nginx內建立新的日誌資料夾命名為`server-logs`
4.在nginx內建立`nginx-service.xml文件`，寫入文件配置
 整體目錄如下:
![](https://hackmd.io/_uploads/rJ-RUah-p.png)
5.nginx-service.xml配置文件如下：主要包含日誌位置、啟動關閉
  記這邊的`nginx`資料夾位置要填寫正確
```javascript=
<service>
	<id>nginx</id>
	<name>nginx</name>
	<description>nginx</description>
	<logpath>C:\Users\q0981\OneDrive\桌面\nginx-1.25.2\server-logs\</logpath>
	<logmode>roll</logmode>
	<depend></depend>
	<executable>C:\Users\q0981\OneDrive\桌面\nginx-1.25.2\nginx.exe</executable>
     	<stopexecutable>C:\Users\q0981\OneDrive\桌面\nginx-1.25.2\nginx.exe</stopexecutable>
	<stoparguments>-s stop</stoparguments>
</service>
```
6.nginx載入到Windows服務中。在nginx安裝目錄以管理員身分啟用CMD輸入：`nginx-service.exe` install 這邊邊的exe檔案要輸入自己命名的名稱![](https://hackmd.io/_uploads/SkcaF63bp.png)
7.在Windows服務中找到nginx服務，將啟動方式改成自動並將其啟動。![](https://hackmd.io/_uploads/BkOOcphWp.png)
8.透過瀏覽器存取專案地址，檢查是否啟動成功。![](https://hackmd.io/_uploads/Syji9a3bT.png)
Windows Service Wtapper 命令
 

| 命令 | 功能 |
| -------- | -------- |
| nginx-service.exe install   | 註冊系統服務     |
| nginx-service.exe uninstall   | 刪除已註冊系統服務     |
| nginx-service.exe stop   | 關閉服務     |
| nginx-service.exe start   |啟動服務     |
## 7.如果遇到nginx服務以停止但是網頁還是可以載入(解決發法)
![](https://hackmd.io/_uploads/ryxajT2-a.png)
1.在nginx安裝目錄以管理員身分啟用CMD輸入:`tasklist | findstr nginx` 它將列出所有正在運行的 Nginx 進程
![](https://hackmd.io/_uploads/HJoO2Th-T.png)
2.再輸入 `taskkill /F /IM nginx.exe` 命令終止所有 Nginx 進程
![](https://hackmd.io/_uploads/ryiA2ah-p.png)
3.再去`nginx-service.xml`文件內查看這兩句是否有填寫錯誤或是版本錯誤
![](https://hackmd.io/_uploads/S1yHpT3ZT.png)
4.再重新啟用Windows服務中的nginx服務