目錄
第一章 前言
第二章 準備工作
2.1 項目打包理解
2.1.1 打包命令
2.1.2 理解npm run serve/dev 和 npm run build命令
2.2 nginx參數(shù)配置理解
2.2.1 nginx常用基本命令
2.2.2 默認配置
2.2.3?搭建不同網(wǎng)站的站點
2.2.4 禁止訪問的目錄以及一鍵申請SSL證書驗證目錄相關設置
2.2.5 根據(jù)文件類型設置過期時間
2.2.6?禁止文件緩存
2.2.7 跨域問題
第三章 配置參考
第一章 前言
在我們前端開發(fā)中也經(jīng)常需要把前端的靜態(tài)資源放到服務器中看效果，那么我們就需要用到nginx來配置??！該文章主要以npm為例，當然還有yarn、pnpm，但是知識是相通的！?。?/p>
第二章 準備工作
2.1 項目打包理解
2.1.1 打包命令
不用說肯定是npm run build肯定是沒錯的
npm run build 或者
yarn run build但是當經(jīng)理對我們說，你打一個測試包發(fā)給我/你打一個生成包發(fā)給我，這個時候涉及到了多環(huán)境的打包怎么辦呢，接下來就以小編的理解說說：打包的情況
2.1.2 理解npm run serve/dev 和 npm run build命令
npm ERR!Missing script: “dev“npm ERR!npm ERR! To see a list of scripts, run（npm run serve/dev/build）_?VE?的博客-CSDN博客
2.2 nginx參數(shù)配置理解
2.2.1 nginx常用基本命令
//開啟服務
1.start nginx.exe // cmd命令進入nginx文件夾后，使用該命令
2.直接點擊nginx目錄下的nginx.exe
// 停止服務
nginx -s stop // 快速停止nginx
nginx -s quit // quit是完整有序的停止nginx
//重新加載配置文件
nginx -s reload // 熱加載2.2.2 默認配置
nginx-1.21.0\conf下的nginx.conf
# 工作進程的數(shù)量
worker_processes 1; # 與worker_connections乘積表示實際處理事件的總數(shù)
events {
worker_connections 1024; # 每個工作進程連接數(shù)
}
http {
include mime.types; # 文件擴展名與文件類型映射表
include self/ *.conf; # 獨立出不同網(wǎng)站不同配置文件,引入其他的配置文件
default_type application/octet-stream; # 默認文件類型
# 日志格式
log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
access_log /srv/log/nginx/access.log access; # 日志輸出目錄
gzip on; # gzip模塊設置，設置是否開啟gzip壓縮輸出
sendfile on; # 開啟文件傳輸模式
#tcp_nopush on; # 減少網(wǎng)絡報文數(shù)量
#keepalive_timeout 0; # 連接不超時，單位 s
# 鏈接超時時間，自動斷開
keepalive_timeout 60;
# 虛擬主機
server {
listen 80; # 監(jiān)聽地址以及端口
server_name localhost; # 瀏覽器訪問域名
charset utf-8; # 默認字符集
access_log logs/localhost.access.log access;
# 路由
location / {
root html; # 訪問根目錄 nginx-1.21.0\html
index index.html index.htm; # 入口文件,可以接收index、index.html、index.htm文件
}
}
}2.2.3?搭建不同網(wǎng)站的站點
?在其他配置文件'self'目錄下，添加新建站點的配置文件'xxx.conf'
server {
listen 8070; # 自定義監(jiān)聽端口
server_name 127.0.0.1; # 瀏覽器訪問域名
charset utf-8;
access_log logs/xx_domian.access.log access;
# 路由
location / {
root dist; # 訪問根目錄 nginx-1.21.0\dist
index index.html index.htm; # 入口文件類型
}
}
2.2.4 禁止訪問的目錄以及一鍵申請SSL證書驗證目錄相關設置
#禁止訪問的文件或目錄
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一鍵申請SSL證書驗證目錄相關設置
location ~ \.well-known{
allow all;
}2.2.5 根據(jù)文件類型設置過期時間
# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
# {
# expires 30d; // 30天過期
# access_log off;
# }
# location ~ .*\.(js|css)?$
# {
# expires 12h;
# access_log off;
# }2.2.6?禁止文件緩存
location ~* \.(js|css|png|jpg|gif)$ {
add_header Cache-Control no-store;
}2.2.7 跨域問題
場景：
? ? ? ? -- 我們前端使用的路徑配置為：http://127.0.0.1:8070/(nginx配置)
? ? ? ? -- 需要向后端請求的路徑為：?http://192.168.1.19:8087/(項目打包配置)
此時前端向后端發(fā)送請求一定會出現(xiàn)跨域！！
解決方法：啟動nginx服務器，將server_name設置為127.0.0.1，然后設置響應的攔截前端需要跨域的請求置相應的location以攔截前端需要跨域的請求，最后將請求代理回自己需要請求的后端路徑，以我的為例：文章來源：http://www.zghlxwxcb.cn/news/detail-757067.html
server
{
listen 8001;
server_name 127.0.0.1;
location /api/ {
proxy_pass http://192.168.1.19:8087/;
proxy_http_version 1.1; # http版本
proxy_set_header Upgrade $http_upgrade; # 繼承地址，這里的$http_upgrade為上面的proxy_pass
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr; # 傳遞的ip
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 3000;
}
}第三章 配置參考
小編基本配置提供參考——文章來源地址http://www.zghlxwxcb.cn/news/detail-757067.html
server
{
listen 8070;
server_name 127.0.0.1;
index index.php index.html index.htm default.php default.htm default.html;
root dist;
#REWRITE-END
#禁止訪問的文件或目錄
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一鍵申請SSL證書驗證目錄相關設置
location ~ \.well-known{
allow all;
}
# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
# {
# expires 30d;
# access_log off;
# }
# location ~ .*\.(js|css)?$
# {
# expires 12h;
# access_log off;
# }
location /api/ {
proxy_pass http://192.168.1.19:8087/;
proxy_http_version 1.1; # http版本
proxy_set_header Upgrade $http_upgrade; # 繼承地址，這里的$http_upgrade為上面的proxy_pass
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr; # 傳遞的ip
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 3000;
}
location / {
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
}到了這里，關于nginx: 部署前端項目的詳細步驟（vue項目build打包+nginx部署）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
