本地使用nginx部署前端服務
阿新 • • 發佈：2021-12-08
本地部署前端應用
我們在開發或解決問題後，需要部署程式碼到線上進行驗證，但是有時候去部署環境是可能會直接影響到其他在使用環境的人。這個時候我們可以自己本地去部署程式碼。去模擬在線上執行的場景。
環境準備
- nginx伺服器
可以作為伺服器的選擇有很多。這裡我們選擇最常用的nginx 下載
下載後，解壓到自定義目錄下即可。 目錄如下
現在我們去修改下conf/nginx.conf檔案
nginx.conf
worker_processes 1; # Nginx程序，一般設定和cpu核數一樣 error_log logs/error.log; #錯誤日誌存放位置 events { worker_connections 1024; } http { include mime.types; #副檔名和型別對映表 default_type application/octet-stream; #預設的檔案型別 sendfile on; #開啟高效檔案傳輸模式 #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 80; # 啟動後的埠 server_name localhost; # 啟動時的地址 server name 為虛擬伺服器的識別路徑。因此不同的域名會通過請求頭中的HOST欄位，匹配到特定的server塊，轉發到對應的應用伺服器中去。 #charset koi8-r; #access_log logs/host.access.log main; location / { root html; #服務預設啟動目錄 index index.html index.htm; #預設訪問檔案 } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # # 其他錯誤碼頁面配置 配置後需要重啟 error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } }
以上是簡化後的配置，重點在於，location中的配置。location /代表我們訪問根路徑會被匹配進行路由到配置的頁面。
測試一下。在預設啟動的目錄下。新增一個我們自己根目錄stones 並且新增index.html。新增一個自定義的根目錄的原因在於
在微服務的場景下。我們往往不止一個前端專案，為了將不同專案的程式碼放置在不同的目錄下。
<!-- html/stones/index.html --> <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <body> <h1> hello world！ </h1> </body> </html>
- 修改nginx配置
location / {
root html; #服務預設啟動目錄
index stones/index.html; #預設訪問檔案 (這裡路徑需要修改)
}
- 啟動服務
# 常用的nginx命令 # 檢視Nginx的版本號：nginx -V # 啟動Nginx：start nginx 或者 nginx # 快速停止或關閉Nginx：nginx -s stop # 正常停止或關閉Nginx：nginx -s quit # 配置檔案修改重灌載命令：nginx -s reload # 檢視windows工作管理員下Nginx的程序命令：tasklist /fi "imagename eq nginx.exe" # 終止程序 taskkill /F /pid 252288 PS D:\Software\nginx-1.21.4> start nginx PS D:\Software\nginx-1.21.4>
只見cmd黑視窗閃了下。我們訪問試一試 server_name + listen = localhost:80; 嘗試瀏覽器訪問下
啟動成功。
以上只是一個簡單的html頁面。下面我們試一試複雜的前端專案
準備前端專案
- 這裡使用以前的例子
stones7進行打包。
PS E:\DDD\Vue3CLI\stones7> yarn build
yarn run v1.22.17
$ vue-cli-service build
| Building for production...
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
File Size Gzipped
dist\js\chunk-vendors.5e9f437b.js 145.84 KiB 52.14 KiB
dist\js\app.2169c032.js 5.09 KiB 2.30 KiB
dist\js\about.56e62a22.js 0.38 KiB 0.29 KiB
dist\css\app.90dd0e3c.css 0.42 KiB 0.26 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
Done in 42.79s.
-
將打好包的目錄複製到
html/stones目錄下。
-
重啟nginx
D:\Software\nginx-1.21.4>nginx -s reload
注意: 如果像以上單獨設定了一個 stones目錄 則需要在專案中配置base路徑。以便正確的訪問到我們的前端靜態資源。
以Vue3專案stones7為例
stones7檔案
// 1. 根目錄下新增env配置檔案
# 根路徑
BASE_URL=/stones
// 2. vue.config.js 需要配置publicPath
publicPath: process.env.BASE_URL
// 3. 如果使用了路由
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
// 4. public/index.html 引用路徑需要配置 BASE_URL
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
訪問http://localhost:80, 成功