中英文企业网站php源码,做外贸网站选择服务器,找人做网站需要注意什么,九江市建设局网站在前端开发中#xff0c;项目开发完成后#xff0c;如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器#xff0c;凭借其出色的性能和丰富的功能#xff0c;成为了前端项目部署的首选方案。本文将详细介绍在… 在前端开发中项目开发完成后如何高效、稳定地将其部署到生产环境是至关重要的一步。Nginx 作为一款轻量级、高性能的 Web 服务器和反向代理服务器凭借其出色的性能和丰富的功能成为了前端项目部署的首选方案。本文将详细介绍在 Nginx 已安装好的基础上如何进行前端项目的配置让你的前端项目顺利上线。
一、Nginx 基础认知
1.1 工作原理
Nginx 采用事件驱动的异步非阻塞处理方式在处理大量并发连接时表现出色。它通过多个工作进程监听客户端请求每个工作进程可以处理多个连接避免了传统服务器在高并发场景下的性能瓶颈。
1.2 核心配置文件
Nginx 的核心配置文件存放位置会因安装方式和操作系统的不同而有所变化当然也可以在定义安装路径。我的核心配置文件位于 /usr/local/nginx/conf/nginx.conf 。同时为了方便管理不同的项目我们可以在 /usr/local/nginx/conf 目录下创建一个 conf.d 子目录用于存放各个项目的独立配置文件。
二、前端静态资源部署
2.1 准备前端项目
那目前已完成了前端项目的开发并使用构建工具Webpack进行了打包生成了包含 HTML、CSS、JavaScript、图片等的静态文件。将这些打包后的文件存放在一个指定的目录下例如 /var/www/my-frontend-project 。
其中如果本地机器和服务器之间能够通过 SSH 正常通信把文件上传到服务器可以通过scp命令
scp -r /home/user/my-frontend-project usernameserver_ip:/var/www/
username 你在服务器上的登录用户名。server_ip 服务器的 IP 地址。
2.2 配置 Nginx
2.2.1 创建项目配置目录
首先在 /usr/local/nginx/conf 目录下创建 conf.d 目录如果该目录不存在
mkdir -p /usr/local/nginx/conf/conf.d
2.2.2 创建项目配置文件
在 conf.d 目录下创建一个新的配置文件例如 my-frontend-project.conf 并添加以下内容
server {listen 80;server_name your_domain_or_ip;root /var/www/my-frontend-project;index index.html index.htm;location / {try_files $uri $uri/ /index.html;}
}
listen 80指定 Nginx 监听的端口号为 80这是 HTTP 协议的默认端口。server_name your_domain_or_ip填写服务器的域名或 IP 地址以便客户端能够通过该地址访问项目。root /var/www/my-frontend-project指定前端项目的根目录Nginx 将从该目录中查找并返回静态文件。index index.html index.htm设置默认的索引文件当客户端访问根目录时Nginx 会优先返回 index.html 或 index.htm 文件。location /配置根路径的请求处理规则try_files $uri $uri/ /index.html 表示当请求的文件不存在时返回 index.html 文件这对于单页面应用SPA非常重要。
注意使用80端口之前通过“netstat -ntulp | grep 80”命令确认80端口是否被占用 如果被占用可以换一个端口避免影响其他业务。
2.2.3 引入项目配置文件
在 /usr/local/nginx/conf/nginx.conf 文件中添加以下语句以确保 conf.d 目录下的配置文件被加载
include /usr/local/nginx/conf/conf.d/*.conf;
2.3 检查配置并重启 Nginx
在修改完配置文件后需要检查配置文件是否存在语法错误
/usr/local/nginx/sbin/nginx -t 如果检查通过重启 Nginx 服务使配置生效
/usr/local/nginx/sbin/nginx -s reload
2.4 验证部署
在浏览器中输入服务器的域名或 IP 地址如果能够看到前端项目的页面说明部署成功。
三、静态资源缓存配置
为了提高前端项目的性能减少服务器的负载可以对静态资源进行缓存配置。在 my-frontend-project.conf 文件中添加以下内容
location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {expires 30d;add_header Cache-Control public, no-transform;
}location ~* \.(css|js|png|jpg|jpeg|gif|ico)$匹配 CSS、JavaScript、图片等静态资源文件。expires 30d设置静态资源的缓存时间为 30 天客户端在 30 天内再次请求该资源时将直接使用本地缓存。add_header Cache-Control public, no-transform添加 Cache-Control 头信息允许公共缓存不进行转换。
四、反向代理配置
如果前端项目需要与后端 API 进行交互可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容
四、反向代理配置
如果前端项目需要与后端 API 进行交互可以使用 Nginx 进行反向代理配置。在 my-frontend-project.conf 文件中添加以下内容
location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}location /api/匹配以 /api/ 开头的请求。proxy_pass http://backend_server_ip:port/将请求转发到后端服务器的指定地址和端口。proxy_set_header设置请求头信息将客户端的真实 IP 地址传递给后端服务器。
完整的 my-frontend-project.conf 文件
server {listen 80;server_name your_domain;# 前端项目根目录root /var/www/my-frontend-project;# 默认索引文件index index.html index.htm;# 静态资源缓存配置location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {# 缓存 30 天expires 30d;add_header Cache-Control public, no-transform;}# 前端项目根路径配置location / {try_files $uri $uri/ /index.html;}# 反向代理配置将 /api/ 开头的请求转发到后端服务器location /api/ {proxy_pass http://backend_server_ip:port/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
}
请根据实际情况修改上述配置文件中的域名、前端项目路径、后端 API 地址等信息。修改配置文件后使用 sudo /usr/local/nginx/sbin/nginx -t 检查配置语法确认无误后使用 sudo /usr/local/nginx/sbin/nginx -s reload 重新加载配置。
