当前位置: 首页 > news >正文

前端项目上传服务器

1、npm run build 打包静态资源,打包为dist文件夹

2、把dist文件夹放在云服务器的/var/dist/项目名称

3、把接口文件放在var/node-login里,node-login是新建的文件夹,需要进入到此目录,npm init -y (初始化一个package.json)

4、安装里面需要用到的安装包,比如:npm install express cors jsonwebtoken

5、 安装进程托管工具 pm2: npm install pm2 -g

6、 启动你的登录接口 pm2: start index.js --name node-api (启动node接口,命名login-api)

7、设置服务器开机自动启动 pm2 startup pm2 save

8、vue.config.js或者vite.config.js里代理设置需要在/etc/nginx里的nginx.conf里配置,服务器默认是80端口,如果多个项目,可以写多个serve,配置不同的端口,如81

server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/html;

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
location /{
root /var/qyou;
index index.html index.html;
try_files $uri $uri/ /index.html; #解决刷新404
}
location /too/{
#设置代理目标
proxy_pass https://3g.163.com/;
}
location /boo/{
#设置代理目标
proxy_pass https://www.qyer.com/;
}
location /login/{
#设置代理目标
proxy_pass http://127.0.0.1:7788/login;
}

}

server {
listen 81;
listen [::]:81;
server_name 120.48.98.116;
root /var/wangyi;
index index.html;

# 1. 优先写foo代理(放在最上方,最高优先级)
location ^~ /foo {
rewrite ^/foo(.*)$ $1 break;
proxy_pass http://127.0.0.1:3000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}

# 2. 其次写api外网代理
location /api/ {
proxy_pass https://you.163.com/;
proxy_set_header Host you.163.com;
proxy_set_header User-Agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36";
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_redirect off;
}

# 3. 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
expires 7d;
add_header Cache-Control "public";
}

# 4. 全局静态页面匹配(必须放在所有代理location最后)
location / {
try_files $uri $uri/ /index.html; #解决刷新404
}
}

http://www.jsqmd.com/news/1032223/

相关文章:

  • 5分钟终极指南:用Obsidian-i18n插件让英文界面秒变中文
  • HJG系列测量显微镜,赋能半导体封装质控新篇章
  • 2026腾讯会议领衔5款纪要工具选型指南
  • 搞科研,就别再用普通AI生图了
  • 如何让2008年老Mac运行最新macOS系统?OpenCore Legacy Patcher完整指南
  • 2026网络安全行业趋势分析:3大机遇+4大挑战
  • 15个角度解读南京杰达家居-专业中央空调、暖气片、地暖安装冷暖公司 - 资讯纵览
  • 如何突破平台壁垒:WorkshopDL实现跨平台Steam创意工坊模组下载的完整技术方案
  • 深度解析:iortcw项目的现代化改造与性能优化实战指南
  • 2026广州口碑TOP4专业涉外纠纷律所|本地成熟大型商事律所资深一站式跨境贸易涉外仲裁境外送达定制化国际诉讼服务商|高效贴心全程跟进外贸欠款涉外离婚股权追索跨境执行维权落地解决方案 - 资讯速览
  • 深圳福田意大利语培训哪个靠谱 - 资讯速览
  • 天赐范式第76天:天赐范式系列文章技术勘误与致歉声明
  • iPaaS科普选型指南 | 多租户 vs. 单租户:SaaS iPaaS的隔离与合规选择
  • Pearcleaner:基于SwiftUI的macOS深度清理工具技术解析
  • AI 中转站怎么选?向量引擎 OpenAI 兼容接口接入 Dify / Cursor / Chatbox 配置与报错排查
  • 从张量指标运算的视角,直观理解梯度无旋与旋度无散
  • 深度解析OptiScaler:跨GPU超分辨率与帧生成技术实战指南
  • 上海AI Agent智能体开发公司:从工程化交付、数据闭环到D-coding优势的全景剖析 - 资讯纵览
  • 任天堂Switch大气层系统:解锁游戏主机的无限潜能
  • 百度网盘解析工具:三步获取真实下载地址的完整指南
  • 英特尔与英伟达联合开发Serpent Lake SoC芯片,计划2028年CES首发
  • 新手注意2026做视频内容转文字有哪些常见坑点?实测整理实用避坑经验
  • 2026年运城GEO推荐:从技术选型到效果落地的全面评测指南 - 资讯纵览
  • 2026广州口碑TOP4专业遗产继承律所|本地成熟大型商事律所资深一站式遗嘱公证房产分割定制化析产诉讼服务商|高效贴心全程跟进遗嘱拟定代位继承遗赠纠纷过户维权落地解决方案 - 资讯速览
  • 2026年如何快速总结视频工具 结合使用成本实测对比 差距竟然这么大谁更值得选
  • 聚焦产线质检升级:2026视觉检测设备品牌技术实测指南 - 资讯速览
  • GPT-4o免费使用实操指南:设备兼容性与语音图像启用全解析
  • 2026 年主流程序员接单平台 全方位横向对比测评
  • 希臘文翻譯公司:專業精準的語言解決方案
  • 045 2026版科研痛点攻关:航天发动机喷管高温烧蚀防护复合材料体系