本地部署前端應用
我們在開發或解決問題后，需要部署代碼到線上進行驗證，但是有時候去部署環境是可能會直接影響到其他在使用環境的人。這個時候我們可以自己本地去部署代碼。去模擬在線上運行的場景。
環境准備
- 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, 成功
