Table of contents
2.1 Understanding project packaging
2.1.2 Understand the npm run serve/dev and npm run build commands
2.2 Understanding nginx parameter configuration
2.2.1 Commonly used basic commands of nginx
2.2.3 Build sites with different websites
2.2.5 Set expiration time based on file type
Chapter 3 Configuration Reference
Chapter 1 Preface
In our front-end development, we often need to put the front-end static resources into the server to see the effect , so we need to use nginx to configure it ! ! This article mainly uses npm as an example, and of course yarn and pnpm , but the knowledge is the same! ! !
Chapter 2 Preparation
2.1 Understanding project packaging
2.1.1 Packaging command
Needless to say, it must be npm run build .
npm run build 或者
yarn run buildBut when the manager says to us, you make a test package and send it to me/you make a generation package and send it to me, what should we do when it involves packaging for multiple environments ? Next, let’s talk about it based on the editor’s understanding: Packaging Condition
2.1.2 Understand the npm run serve/dev and npm run build commands
2.2 Understanding nginx parameter configuration
2.2.1 Commonly used basic commands of 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 Default configuration
nginx.conf under nginx-1.21.0\conf
# 工作进程的数量
worker_processes 1; # 与worker_connections乘积表示实际处理事件的总数
events {
worker_connections 1024; # 每个工作进程连接数
}
http {
include mime.types; # 文件扩展名与文件类型映射表
include self/ *.conf; # 独立出不同网站不同配置文件,引入其他的配置文件
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; # 减少网络报文数量
#keepalive_timeout 0; # 连接不超时，单位 s
# 链接超时时间，自动断开
keepalive_timeout 60;
# 虚拟主机
server {
listen 80; # 监听地址以及端口
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 Build sites with different websites
In the other configuration file 'self' directory , add the configuration file 'xxx.conf' of the new site
server {
listen 8070; # 自定义监听端口
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 Directories that are prohibited from access and settings related to one-click application for SSL certificate verification directories
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}2.2.5 Set expiration time based on file type
# location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
# {
# expires 30d; // 30天过期
# access_log off;
# }
# location ~ .*\.(js|css)?$
# {
# expires 12h;
# access_log off;
# }2.2.6 Disable file caching
location ~* \.(js|css|png|jpg|gif)$ {
add_header Cache-Control no-store;
}2.2.7 Cross-domain issues
Scenes:
-- The path configuration used by our front end is: http://127.0.0.1:8070/ (nginx configuration)
--The path that needs to be requested to the backend is: http://192.168.1.19:8087/(project packaging configuration)
At this time, when the front end sends a request to the back end, there will definitely be cross-domain! !
Solution: Start the nginx server, set server_name to 127.0.0.1 , then set the corresponding location to intercept the front-end requests that need cross-domain requests, and finally proxy the request back to the back-end that you need to request. Path , take mine as an example:
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;
}
}Chapter 3 Configuration Reference
The editor provides basic configuration for reference——
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;
}
}