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

新建网站部署流程


1. 新建 Node 服务,指定端口并代理前端静态资源

操作步骤:
  1. 初始化 Node 项目
    mkdir my-website && cd my-website
    npm init -y
    npm install express
    
  2. 创建 app.js(示例代码)
    const express = require('express');
    const app = express();
    const PORT = 3000; // 指定服务端口// 代理前端静态资源(假设前端文件在 `dist` 目录)
    app.use(express.static('dist'));// 处理前端路由(如单页应用)
    app.get('*', (req, res) => {res.sendFile(__dirname + '/dist/index.html');
    });app.listen(PORT, () => {console.log(`Server running on http://localhost:${PORT}`);
    });
    
  3. 测试服务
    node app.js
    
    访问 http://服务器IP:3000 确认服务正常运行。

2. 上传前端项目到指定目录

操作步骤:
  1. 构建前端项目(以 Vue/React 为例)
    npm run build  # 生成 `dist` 或 `build` 目录
    
  2. 上传到服务器
    scp -r ./dist user@服务器IP:/path/to/my-website/
    
    • 确保目录结构与 Node 服务的 express.static 路径一致。

3. 使用 PM2 代理 Node 进程

操作步骤:
  1. 全局安装 PM2
    npm install pm2 -g
    
  2. 启动服务并设为守护进程
    pm2 start app.js --name "my-website"
    
  3. 设置开机自启
    pm2 startup
    pm2 save
    
  4. 常用命令
    pm2 logs my-website      # 查看日志
    pm2 restart my-website   # 重启服务
    

4. 新增服务器二级域名(A记录解析)

操作步骤:
  1. 在域名管理平台(如阿里云DNS、Cloudflare)添加A记录
    • 主机名subdomain(如 blog
    • 记录值:服务器公网IP
    • TTL:默认(600秒)
  2. 验证解析生效
    ping subdomain.your-domain.com
    

5. 开放服务器端口并设置防火墙

操作步骤:
  1. 检查端口占用
    sudo netstat -tulnp | grep 3000
    
  2. 开放端口(以UFW为例)
    sudo ufw allow 3000/tcp   # 放行Node服务端口
    sudo ufw enable           # 启用防火墙
    sudo ufw status           # 验证规则
    
  3. 云服务器安全组(如AWS/阿里云)
    • 在控制台添加入站规则:允许 TCP 3000

6. 配置 Nginx 反向代理

操作步骤:
  1. 创建 Nginx 配置文件
    sudo nano /etc/nginx/conf.d/my-website.conf
    
  2. 配置内容(示例)
    server {listen 80;server_name subdomain.your-domain.com;location / {proxy_pass http://localhost:3000;  # 转发到Node服务proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}# 可选:静态文件直接由Nginx处理location /static {alias /path/to/my-website/dist/static;}
    }
    
  3. 测试并重启 Nginx
    sudo nginx -t   # 检查语法
    sudo systemctl restart nginx
    

7. 访问调试与日志排查

操作步骤:
  1. 访问二级域名
    浏览器打开 http://subdomain.your-domain.com,检查页面和网络请求。
  2. 查看服务日志
    pm2 logs my-website          # Node服务日志
    sudo tail -f /var/log/nginx/error.log  # Nginx错误日志
    
  3. 常见问题
    • 502 Bad Gateway:检查 Node 服务是否运行、端口是否匹配。
    • 403 Forbidden:确认 Nginx 有权限访问 dist 目录(chmod 755)。
    • DNS未生效:等待解析或本地修改 hosts 文件临时测试。

补充优化建议

  1. HTTPS 配置
    使用 Let’s Encrypt 免费证书:
    sudo apt install certbot python3-certbot-nginx
    sudo certbot --nginx -d subdomain.your-domain.com
    
  2. 静态文件缓存
    在 Nginx 配置中添加缓存策略:
    location /static {expires 365d;add_header Cache-Control "public";
    }
    
  3. 进程监控
    使用 pm2 monit 实时监控资源占用。

流程图

新建Node服务
上传前端资源
PM2守护进程
解析二级域名
开放端口
Nginx反向代理
访问调试

按此流程操作,即可完成从代码到线上服务的完整部署!

http://www.lqws.cn/news/150049.html

相关文章:

  • 力扣面试150题--被围绕的区域
  • ArcGIS Pro 3.4 二次开发 - 公共设施网络
  • 实时数据仓库是什么?数据仓库设计怎么做?
  • Neovim - 常用插件,提升体验(三)
  • [论文阅读] 人工智能+项目管理 | 当 PMBOK 遇见 AI:传统项目管理框架的破局之路
  • flutter 中Stack 使用clipBehavior: Clip.none, 超出的部分无法响应所有事件
  • 深度学习在非线性场景中的核心应用领域及向量/张量数据处理案例,结合工业、金融等领域的实际落地场景分析
  • 电子行业AI赋能软件开发经典案例——某金融软件公司
  • 软考 系统架构设计师系列知识点之杂项集萃(82)
  • Qt实现一个悬浮工具箱源码分享
  • 【HarmonyOS 5】 社交行业详解以及 开发案例
  • 使用 HTML +JavaScript 从零构建视频帧提取器
  • vue3+ts实现百度地图鼠标绘制多边形
  • Oracle-高频业务表的性能检查
  • 深度解析地质灾害风险普查:RS与GIS技术在泥石流、滑坡灾害中的应用,ArcGIS数据管理、空间数据转换、专题地图制作、DEM分析及实战案例分析
  • Transformer实战——词嵌入技术详解
  • 基于Qt的app开发第十三天
  • Java爬虫技术详解:原理、实现与优势
  • 【设计模式-4.11】行为型——解释器模式
  • JMeter 实现 MQTT 协议压力测试 !
  • MySQL中的部分问题(1)
  • kafka入门学习
  • windows10 php报错
  • 【设计模式】门面/外观模式
  • JVM中的各类引用
  • 【Rust宏编程】Rust有关宏编程底层原理解析与应用实战
  • 5.Declare_Query_Checking.ipynb
  • 群晖NAS套件历史版本资源
  • 【图像处理入门】6. 频域图像处理:傅里叶变换与滤波的奥秘
  • [华为eNSP] OSPF综合实验