206 字
1 分钟
nginx入门学习

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

使用vite创建react应用#

Terminal window
npm create vite@latest

使用构建命令进行打包#

Terminal window
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. 测试配置
Terminal window
nginx -t
  1. 重新加载配置
Terminal window
nginx -s reload
  1. 启动nginx服务:
Terminal window
nginx
  1. 停止nginx服务:
Terminal window
nginx -s stop

访问#

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

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

分享文章

生成精美分享图或复制链接,与更多人分享本文。

继续阅读

换条路线

从其他文章中稳定抽取

最后更新于 ,距今已过 117

部分内容可能已过时