Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

Ubuntu 20.04 LTS 中部署 网页 + Node.js 应用 + Nginx 跨域配置 的详细步骤

  • 一、准备工作
    • 1、连接服务器
    • 2、更新系统
  • 二、安装 Node.js 环境
    • 1、安装 Node.js 官方 PPA(用于获取最新稳定版):
    • 2、安装 Node.js 和 npm(LTS 长期支持版本):
    • 3、验证安装:
  • 三、部署 Node.js 应用
    • 1. 准备应用代码
      • 创建项目目录(如 /var/www/node-app):
      • 将本地代码上传至服务器(可通过 scp 或 FTP 工具):
    • 2. 安装依赖并启动应用
      • 进入项目目录,安装依赖:
      • 安装 pm2 守护进程管理器:
      • 生产环境启动(推荐使用pm2进程管理工具)
  • 四、安装并配置 Nginx
    • 1. 安装 Nginx
    • 2. 配置 Nginx 代理 Node.js 应用
      • 创建 Nginx 配置文件(替换默认站点):
      • 写入以下内容(根据实际情况修改端口、路径等参数):
    • 3. 启用配置并测试
      • 激活站点配置:
      • 检查 Nginx 配置语法是否正确:
      • 重启 Nginx 使配置生效:
  • 五、跨域配置验证
  • 六、补充优化(可选)
    • 1、HTTPS 配置(推荐)
    • 2、防火墙设置
    • 3、日志管理
  • 最后:总结流程
    • 环境安装:Node.js + Nginx
    • 应用部署:上传代码 + 启动服务(推荐用 pm2)
    • Nginx 代理:配置反向代理和跨域响应头
    • 安全优化:HTTPS + 防火墙
    • 调试验证:检查服务状态和跨域请求是否正常

一、准备工作

1、连接服务器

通过 SSH 工具(如 Putty、Xshell 或终端命令)连接到 Ubuntu 服务器:

ssh username@服务器IP地址

2、更新系统

确保系统软件包为最新版本:

sudo apt update && sudo apt upgrade -y

二、安装 Node.js 环境

1、安装 Node.js 官方 PPA(用于获取最新稳定版):

curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash -

2、安装 Node.js 和 npm(LTS 长期支持版本):

sudo apt install -y nodejs

3、验证安装:

node -v    # 查看 Node.js 版本(如 v16.xx.x)
npm -v     # 查看 npm 版本

三、部署 Node.js 应用

1. 准备应用代码

创建项目目录(如 /var/www/node-app):

sudo mkdir -p /var/www/node-app
sudo chown -R $USER:$USER /var/www/node-app  # 赋予当前用户权限

将本地代码上传至服务器(可通过 scp 或 FTP 工具):

scp -r 本地项目路径 username@服务器IP:/var/www/node-app

2. 安装依赖并启动应用

进入项目目录,安装依赖:

cd /var/www/node-app
npm install

开发环境启动(用于调试):

node app.js  # 假设入口文件为 app.js,端口默认 3000

安装 pm2 守护进程管理器:

npm install pm2 -g

生产环境启动(推荐使用pm2进程管理工具)

pm2 start app.js --name "node-app"  # 启动应用并命名
pm2 save  # 保存进程列表,避免服务器重启后应用停止

四、安装并配置 Nginx

1. 安装 Nginx

sudo apt install -y nginx
sudo systemctl start nginx  # 启动 Nginx
sudo systemctl enable nginx  # 设置开机自启

此时访问服务器 IP 应看到 Nginx 默认欢迎页面。

2. 配置 Nginx 代理 Node.js 应用

创建 Nginx 配置文件(替换默认站点):

sudo nano /etc/nginx/sites-available/node-app

写入以下内容(根据实际情况修改端口、路径等参数):

server {listen 80;server_name your-domain.com;  # 替换为你的域名或服务器 IP# 静态资源代理(如 HTML、CSS、JS)location / {root /var/www/node-app/public;  # 网页静态资源目录index index.html index.htm;try_files $uri $uri/ =404;}# Node.js 应用代理(假设 Node.js 运行在 3000 端口)location /api/ {  # 代理路径可自定义,如 /api/proxy_pass http://localhost:3000/;  # 指向 Node.js 应用地址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;}# 跨域资源共享(CORS)配置location / {if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';# 允许自定义请求头(如 Authorization)add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}if ($request_method = 'POST') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';}if ($request_method = 'GET') {add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';}}
}

3. 启用配置并测试

激活站点配置:

sudo ln -s /etc/nginx/sites-available/node-app /etc/nginx/sites-enabled/

检查 Nginx 配置语法是否正确:

sudo nginx -t

重启 Nginx 使配置生效:

sudo systemctl restart nginx

五、跨域配置验证

前端请求示例(以 JavaScript 为例)
在前端代码中发送跨域请求时,Nginx 会自动添加响应头:

fetch('http://your-domain.com/api/data', {method: 'GET',headers: {'Content-Type': 'application/json','Authorization': 'Bearer your-token'  // 若有自定义头需与 Nginx 配置一致}
})
.then(response => response.json())
.then(data => console.log(data));

测试跨域是否生效
使用浏览器开发者工具(F12)查看响应头,确保包含:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: ...

若出现跨域错误,检查 Nginx 配置中的路径、端口是否与 Node.js 应用匹配,以及防火墙是否放行端口(如 Ubuntu 的 UFW 需开放 80/443 端口)。

六、补充优化(可选)

1、HTTPS 配置(推荐)

使用 Certbot 生成免费 SSL 证书:

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com  # 按提示完成配置

2、防火墙设置

sudo ufw allow 'Nginx Full'  # 允许 HTTP/HTTPS 流量
sudo ufw allow ssh  # 保留 SSH 访问
sudo ufw enable  # 启用防火墙

3、日志管理

Nginx 日志路径:
访问日志:/var/log/nginx/access.log
错误日志:/var/log/nginx/error.log
可通过 tail -f 命令实时查看日志调试问题。

最后:总结流程

环境安装:Node.js + Nginx

应用部署:上传代码 + 启动服务(推荐用 pm2)

Nginx 代理:配置反向代理和跨域响应头

安全优化:HTTPS + 防火墙

调试验证:检查服务状态和跨域请求是否正常

通过以上步骤,即可在 Ubuntu 20.04 中完成网页、Node.js 应用和 Nginx 跨域配置的部署

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/diannao/83670.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3DVR制作的工具或平台

3DVR(三维虚拟现实)是利用三维图像技术和虚拟现实技术,将真实场景进行三维扫描并转换成计算机可识别的三维模型,使用户能够在虚拟空间中自由漫游,体验身临其境的感觉。3DVR技术结合了全景拍摄和虚拟现实,提…

垂直智能体:企业AI落地的正确打开方式

在当前AI浪潮中,许多企业急于跟进,推出自己的AI智能体解决方案。然而,市场上大量出现的"万能型"智能体却鲜有真正解决实际问题的产品。本文将探讨为何企业应该专注于开发垂直领域智能体,而非追求表面上的全能&#xff0…

软件工程各种图总结

目录 1.数据流图 2.N-S盒图 3.程序流程图 4.UML图 UML用例图 UML状态图 UML时序图 5.E-R图 首先要先了解整个软件生命周期: 通常包含以下五个阶段:需求分析-》设计-》编码 -》测试-》运行和维护。 软件工程中应用到的图全部有:系统…

王者荣耀游戏测试场景题

如何测试一个新英雄:方法论与实践维度 测试一个新英雄不仅仅是“打打打”,而是一套完整的测试流程,包括设计文档验证、功能验证、数值验证、性能验证、交互验证等。可以从以下多个角度展开: 🔍 1. 方法论维度 ✅ 测试…

第四天的尝试

目录 一、每日一言 二、练习题 三、效果展示 四、下次题目 五、总结 一、每日一言 很抱歉的说一下,我昨天看白色巨塔电视剧,看的入迷了,同时也看出一些道理,学到东西; 但是把昨天的写事情给忘记了,今天…

多模态大语言模型arxiv论文略读(七十八)

AID: Adapting Image2Video Diffusion Models for Instruction-guided Video Prediction ➡️ 论文标题:AID: Adapting Image2Video Diffusion Models for Instruction-guided Video Prediction ➡️ 论文作者:Zhen Xing, Qi Dai, Zejia Weng, Zuxuan W…

优化 Spring Boot 应用启动性能的实践指南

1. 引言 Spring Boot 以其“开箱即用”的特性深受开发者喜爱,但随着项目复杂度的增加,应用的启动时间也可能会变得较长。对于云原生、Serverless 等场景而言,快速启动是一个非常关键的指标。 2. 分析启动过程 2.1 启动阶段概述 Spring Boot 的启动流程主要包括以下几个阶…

Ubuntu下配置VScode出现#include错误请更新includePath的解决方法

首先Ubuntu新手小白一定要先安装g,安装方法是: 在桌面右键打开终端,输入:sudo apt-get install g 安装好g之后,在vscode终端输入:g -v -E -x c - 输出这些路径,复制 如果还存在显示cout不存在的…

【背包dp】小结

背包问题总结 一、什么是背包问题? 定义:给定一个容量为 W 的背包和 n 件物品,每件物品有一个重量 w[i] 和价值 v[i],要求选择若干物品放入背包,在不超过容量的前提下,使总价值最大。 背包问题本质是&am…

济南国网数字化培训班学习笔记-第三组-1-电力通信传输网认知

电力通信传输网认知 电力通信基本情况 传输介质 传输介质类型(导引与非导引) 导引传输介质,如电缆、光纤; 非导引传输介质,如无线电波; 传输介质的选择影响信号传输质量 信号传输模式(单工…

代码随想录算法训练营第六十四天| 图论9—卡码网47. 参加科学大会,94. 城市间货物运输 I

每日被新算法方式轰炸的一天,今天是dijkstra(堆优化版)以及Bellman_ford ,尝试理解中,属于是只能照着代码大概说一下在干嘛。 47. 参加科学大会 https://kamacoder.com/problempage.php?pid1047 dijkstra&#xff08…

upload-labs通关笔记-第8关 文件上传之点绕过

目录 一、点绕过原理 二、deldot()函数 三、源码分析 四、渗透实战 1、构建脚本test8.php 2、打开靶场 3、bp开启拦截 4、点击上传 5、bp拦截 6、后缀名增加点 7、发包并获取脚本地址 8、访问脚本 本文通过《upload-labs靶场通关笔记系列》来进行upload-labs靶场的渗…

Spring Web MVC————入门(3)

今天我们来一个大练习,我们要实现一个登录界面,登录进去了先获取到登录人信息,可以选择计算器和留言板两个功能,另外我们是学后端的,对于前端我们会些基础的就行了,知道ajax怎么用,知道怎么关联…

PhpStudy | PhpStudy 工具安装 —— Windows 系统安装 PhpStudy

🌟想了解这个工具的其它相关笔记?看看这个:[网安工具] 服务器环境配置工具 —— PhpStudy 使用手册 笔者备注:Windows 中安装 PhpStudy 属于傻瓜式安装,本文只是为了体系完善而发。 在前面的章节中,笔者简…

K230 ISP:一种新的白平衡标定方法

第一次遇见需要利用光谱响应曲线进行白平衡标定的方法。很好奇是如何利用光谱响应曲线进行白平衡标定的。 参考资料参考:K230 ISP图像调优指南 K230 介绍 嘉楠科技 Kendryte 系列 AIoT 芯片中的最新一代 AIoT SoC K230 芯片采用全新的多核异构单元加速计算架构&a…

通俗解释Transformer在处理序列问题高效的原因(个人理解)

Transformer出现的背景 CNN 的全局关联缺陷卷积神经网络(CNN)通过多层堆叠扩大感受野,但在自然语言处理中存在本质局限: 局部操作的语义割裂:每个卷积核仅处理固定窗口(如 3-5 词),…

Java 多线程基础:Thread 类核心用法详解

一、线程创建 1. 继承 Thread 类(传统写法) class MyThread extends Thread { Override public void run() { System.out.println("线程执行"); } } // 使用示例 MyThread t new MyThread(); t.start(); 缺点:Java 单…

Django 中时区的理解

背景 设置时区为北京时间 TIME_ZONE ‘Asia/Shanghai’ # 启用时区支持 USE_TZ True 这样设置的作用 前端 (实际上前端el-date-picker 显示的是当地时区的时间) Element组件转换后,我们是东八区,前端传给后端的时间为&…

C# 深入理解类(成员常量)

成员常量 成员常量类似前一章所述的局部常量,只是它们被声明在类声明中而不是方法内,如下面的 示例: 与局部常量类似,用于初始化成员肯量的值在编译时必须是可计算的,而且通常是一个预定 义简单类型或由它们组成的表达…

【深度学习】#12 计算机视觉

主要参考学习资料: 《动手学深度学习》阿斯顿张 等 著 【动手学深度学习 PyTorch版】哔哩哔哩跟李沐学AI 目录 目标检测锚框交并比(IoU)锚框标注真实边界框分配偏移量计算损失函数 非极大值抑制预测 多尺度目标检测单发多框检测(S…