mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4
95 字
1 分钟
nginx入门学习
2026-05-17

使用将react+ts项目部署到nginx服务器,#

使用vite创建react应用#

npm create vite@latest

使用构建命令进行打包#

npm run build

进行nginx配置#

#user nobody;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 8080;
server_name localhost; #如果有真实域名,就填写真实域名
# 真实的 dist 目录位置
root (你的SPA应用项目dist目录);
index index.html;
# 设置条件, 如果
location / {
try_files $uri $uri/ /index.html;
}
# 作缓存,提示资源访问性能
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
}

部署#

首先在nginx目录中,使用nginx相关命令:

  1. 测试配置
nginx -t
  1. 重新加载配置
nginx -s reload
  1. 启动nginx服务:
nginx
  1. 停止nginx服务:
nginx -s stop

访问#

在web中通过域名进行访问,一般是localhost:8080

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

nginx入门学习
https://www.choria.top/posts/nginx-start/
作者
乔瑞雅·克林威尔
发布于
2026-05-17
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录