目次
2.1.2 npm runserve/dev および npm run build コマンドを理解する
2.2.3 異なる Web サイトを使用してサイトを構築する
2.2.4 アクセス禁止ディレクトリとSSL証明書検証ディレクトリのワンクリック申請に関する設定
第 1 章 はじめに
フロントエンド開発では、効果を確認するためにフロントエンドの静的リソースをサーバーに配置する必要があることが多いため、 nginx を使用して設定する必要があります。！この記事では主に npm を例として使用します。もちろん、yarn と pnpm も使用しますが、知識は同じです。！！
第2章 準備
2.1 プロジェクトのパッケージ化について理解する
2.1.1 パッケージ化コマンド
言うまでもなく、それはnpm run buildでなければなりません。
npm run build 或者
yarn run buildしかし、マネージャーが「テストパッケージを作って送ってください/生成パッケージを作って私に送ってください」と言ったとき、複数の環境用のパッケージングが含まれる場合はどうすればよいでしょうか? 次に、それをベースに話しましょう。編集者の理解:梱包状態
2.1.2 npm runserve/dev および npm run build コマンドを理解する
2.2 nginxパラメータ設定を理解する
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
# 工作进程的数量
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 異なる Web サイトを使用してサイトを構築する
もう一方の設定ファイル「self」ディレクトリに、新しいサイトの設定ファイル「xxx.conf」を追加します
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 アクセス禁止ディレクトリとSSL証明書検証ディレクトリのワンクリック申請に関する設定
#禁止访问的文件或目录
location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md)
{
return 404;
}
#一键申请SSL证书验证目录相关设置
location ~ \.well-known{
allow all;
}2.2.5 ファイルの種類に基づいて有効期限を設定する
# 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/(プロジェクトのパッケージ化構成)
このとき、フロントエンドがバックエンドにリクエストを送信すると、必ずクロスドメインが発生します。！
解決策: nginx サーバーを起動し、 server_name を 127.0.0.1 に設定します。次に、クロスドメイン リクエストを必要とするフロントエンド リクエストをインターセプトするように対応する場所を設定し、最後に、リクエストが必要なバックエンドにリクエストをプロキシします。 Path、私の例として挙げます:
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;
}
}第 3 章 構成リファレンス
エディターには参照用の基本構成が提供されます—
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;
}
}