推荐阅读:
[AI-人工智能]免翻墙的AI利器：樱桃茶·智域GPT，让你轻松使用ChatGPT和Midjourney - 免费AIGC工具 - 拼车/合租账号 八折优惠码: AIGCJOEDISCOUNT2024
[AI-人工智能]银河录像局: 国内可靠的AI工具与流媒体的合租平台 高效省钱、现号秒发、翻车赔偿、无限续费|95折优惠码: AIGCJOE
[AI-人工智能]免梯免翻墙-ChatGPT拼车站月卡 | 可用GPT4/GPT4o/o1-preview | 会话隔离 | 全网最低价独享体验ChatGPT/Claude会员服务
[AI-人工智能]边界AICHAT - 超级永久终身会员激活 史诗级神器，口碑炸裂！300万人都在用的AI平台
本文详细介绍了在Linux操作系统下，从零开始使用VPS搭建React应用的全过程。讲解了VPS的基本配置和HTTP服务的搭建，包括安装必要的软件包和配置服务器环境。逐步指导如何在VPS上部署React应用，涵盖代码上传、环境变量设置、依赖安装等关键步骤。提供了优化和安全建议，确保应用稳定运行。通过本文，读者可全面掌握在VPS上搭建React应用的技巧，实现高效、安全的Web服务部署。
本文目录导读：
随着前端技术的不断发展，React已经成为现代Web开发中不可或缺的一部分，为了更好地部署和管理React应用，许多开发者选择在VPS（虚拟专用服务器）上进行部署，本文将详细介绍如何在VPS上搭建React应用，涵盖从服务器购买到应用部署的全过程。
准备工作
1、选择VPS服务商
市场上有很多VPS服务商，如阿里云、腾讯云、DigitalOcean等，选择时需考虑价格、性能、稳定性和售后服务等因素。
2、购买VPS
根据应用需求选择合适的配置，1核2G的配置足以应对小型React应用。
3、安装SSH客户端
为了方便远程管理服务器，需要在本地电脑上安装SSH客户端，如PuTTY或OpenSSH。
服务器基础配置
1、连接VPS
使用SSH客户端连接到VPS，命令如下：
```bash
ssh root@your_vps_ip
```
2、更新系统
连接成功后，首先更新系统包：
```bash
sudo apt update && sudo apt upgrade
```
3、安装必要的软件
安装Node.js、Nginx和Git等必备软件：
```bash
sudo apt install nodejs npm nginx git -y
```
搭建React应用
1、创建React项目
在本地电脑上创建一个新的React项目：
```bash
npx create-react-app my-react-app
cd my-react-app
```
2、配置React应用
修改package.json文件，添加启动和构建脚本：
```json
"scripts": {
"start": "node server.js",
"build": "react-scripts build"
}
```
3、创建服务器文件
在项目根目录下创建server.js文件，用于启动Express服务器：
```javascript
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(Server is running on port ${PORT});
});
```
4、安装依赖
在项目根目录下运行：
```bash
npm install
```
部署到VPS
1、上传项目到VPS
使用Git将项目上传到VPS：
```bash
git init
git add .
git comMit -m "Initial commit"
ssh root@your_vps_ip 'mkdir -p /var/www/my-react-app'
git remote add origin root@your_vps_ip:/var/www/my-react-app
git push -u origin master
```
2、在VPS上安装依赖
连接到VPS，进入项目目录并安装依赖：
```bash
cd /var/www/my-react-app
npm install
```
3、构建React应用
在VPS上运行构建命令：
```bash
npm run build
```
4、启动应用
使用PM2管理Node.js应用，确保应用持续运行：
```bash
npm install -g pm2
pm2 start server.js
pm2 save
pm2 startup
```
配置Nginx反向代理
1、编辑Nginx配置文件
创建并编辑Nginx配置文件：
```bash
sudo nano /etc/nginx/sites-available/my-react-app
```
2、添加配置内容
在文件中添加以下内容：
```nginx
server {
listen 80;
server_name your_domain_or_ip;
location / {
proxy_pass http://localhost:8080;
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;
}
}
```
3、启用配置
创建软链接并重启Nginx：
```bash
sudo ln -s /etc/nginx/sites-available/my-react-app /etc/nginx/sites-enabled/
sudo systemctl restart nginx
```
安全性配置
1、设置防火墙
配置防火墙规则，只允许必要的端口：
```bash
sudo ufw allow OpenSSH
sudo ufw allow 'Nginx Full'
sudo ufw enable
```
2、创建非root用户
为了安全起见，创建一个新的用户并赋予必要权限：
```bash
sudo adduser newuser
sudo usermod -aG sudo newuser
```
3、配置SSH密钥登录
生成并配置SSH密钥，禁用密码登录：
```bash
ssh-keygen
sudo nano /etc/ssh/sshd_config
```
修改以下配置：
```bash
PasswordAuthentication no
```
通过以上步骤，我们成功在VPS上搭建并部署了一个React应用，整个过程涉及服务器配置、React项目创建、依赖安装、应用部署和Nginx反向代理配置等多个环节，希望本文能为你在VPS上部署React应用提供一份详尽的指南。
关键词
VPS, React应用, 服务器配置, SSH连接, 系统更新, Node.js安装, Nginx配置, Git使用, React项目创建, 依赖安装, 项目部署, PM2管理, 反向代理, 防火墙设置, 安全配置, 非root用户, SSH密钥, 密码登录禁用, 虚拟专用服务器, 前端开发, Web应用, 服务器购买, PuTTY, OpenSSH, Express服务器, 构建脚本, 启动脚本, 软件安装, 依赖管理, 项目上传, 构建命令, 应用启动, Nginx编辑, 配置文件, 端口转发, 防火墙规则, 用户权限, SSH配置, 密钥生成, 密码认证, 服务器安全, React部署, VPS搭建, 服务器管理, 远程连接, 系统包更新, 必备软件, 项目目录, 依赖包, Node.js应用, Nginx重启, 链接创建, 防火墙启用, 新用户创建, 密钥登录, 密码登录禁用配置
本文标签属性：
VPS搭建React应用：vps搭建socks5
