从零开始掌握JavaScript框架React全栈开发实战指南与技巧分享助你快速成长为全栈工程师打造现代化Web应用

3267 2025-10-16 16:32:50

);

}

4. 全栈开发概述

全栈开发是指同时掌握前端和后端技术的开发方式。全栈工程师能够独立完成一个Web应用的开发，从用户界面到服务器端逻辑，再到数据库设计。

4.1 前后端分离架构

现代Web应用通常采用前后端分离的架构：

前端：负责用户界面和交互，使用React等框架构建。

后端：负责业务逻辑、数据处理和API提供，可以使用Node.js、Java、Python等技术栈。

通信：前后端通过RESTful API或GraphQL进行通信。

4.2 全栈技术栈选择

常见的JavaScript全栈技术栈包括：

MERN：MongoDB、Express.js、React、Node.js

MEAN：MongoDB、Express.js、Angular、Node.js

其他组合：React + NestJS + PostgreSQL等

5. 后端技术选择

5.1 Node.js与Express.js

Node.js是一个基于Chrome V8引擎的JavaScript运行时，Express.js是Node.js上最流行的Web应用框架：

# 初始化Node.js项目

npm init -y

# 安装Express

npm install express

基本Express服务器示例：

const express = require('express');

const app = express();

const port = 3000;

// 中间件：解析JSON请求体

app.use(express.json());

// 路由

app.get('/', (req, res) => {

res.send('Hello World!');

});

// 获取用户列表

app.get('/api/users', (req, res) => {

// 模拟数据库查询

const users = [

{ id: 1, name: 'John' },

{ id: 2, name: 'Jane' }

];

res.json(users);

});

// 获取单个用户

app.get('/api/users/:id', (req, res) => {

const userId = parseInt(req.params.id);

// 模拟数据库查询

const user = { id: userId, name: 'John' };

res.json(user);

});

// 创建用户

app.post('/api/users', (req, res) => {

const newUser = req.body;

// 模拟数据库插入

console.log('Creating user:', newUser);

res.status(201).json({ message: 'User created successfully', user: newUser });

});

// 启动服务器

app.listen(port, () => {

console.log(`Server running at http://localhost:${port}`);

});

5.2 NestJS框架

NestJS是一个基于TypeScript的Node.js框架，它结合了面向对象编程、函数式编程和响应式编程的元素：

# 安装Nest CLI

npm i -g @nestjs/cli

# 创建新项目

nest new my-nestjs-project

基本NestJS控制器示例：

// src/users/users.controller.ts

import { Controller, Get, Param, Post, Body } from '@nestjs/common';

@Controller('users')

export class UsersController {

@Get()

findAll() {

// 模拟数据库查询

return [

{ id: 1, name: 'John' },

{ id: 2, name: 'Jane' }

];

}

@Get(':id')

findOne(@Param('id') id: string) {

// 模拟数据库查询

return { id: parseInt(id), name: 'John' };

}

@Post()

create(@Body() createUserDto: any) {

// 模拟数据库插入

console.log('Creating user:', createUserDto);

return { message: 'User created successfully', user: createUserDto };

}

}

NestJS模块示例：

// src/users/users.module.ts

import { Module } from '@nestjs/common';

import { UsersController } from './users.controller';

import { UsersService } from './users.service';

@Module({

controllers: [UsersController],

providers: [UsersService],

})

export class UsersModule {}

6. 数据库设计与集成

6.1 关系型数据库（PostgreSQL）

PostgreSQL是一个强大的开源关系型数据库系统：

# 安装PostgreSQL驱动

npm install pg

使用Node.js连接PostgreSQL：

const { Pool } = require('pg');

const pool = new Pool({

user: 'your_username',

host: 'localhost',

database: 'your_database',

password: 'your_password',

port: 5432,

});

// 查询示例

async function getUsers() {

try {

const result = await pool.query('SELECT * FROM users');

return result.rows;

} catch (err) {

console.error(err);

throw err;

}

}

// 插入示例

async function createUser(name, email) {

try {

const result = await pool.query(

'INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *',

[name, email]

);

return result.rows[0];

} catch (err) {

console.error(err);

throw err;

}

}

6.2 非关系型数据库（MongoDB）

MongoDB是一个流行的文档型NoSQL数据库：

# 安装MongoDB驱动

npm install mongodb

使用Node.js连接MongoDB：

const { MongoClient } = require('mongodb');

const uri = 'mongodb://localhost:27017';

const client = new MongoClient(uri);

async function connect() {

try {

await client.connect();

console.log('Connected to MongoDB');

return client.db('mydatabase');

} catch (err) {

console.error(err);

throw err;

}

}

// 查询示例

async function getUsers(db) {

try {

const users = db.collection('users');

const result = await users.find({}).toArray();

return result;

} catch (err) {

console.error(err);

throw err;

}

}

// 插入示例

async function createUser(db, user) {

try {

const users = db.collection('users');

const result = await users.insertOne(user);

return result.ops[0];

} catch (err) {

console.error(err);

throw err;

}

}

6.3 ORM/ODM

使用ORM（对象关系映射）或ODM（对象文档映射）可以简化数据库操作：

6.3.1 Sequelize（SQL ORM）

# 安装Sequelize和对应数据库驱动

npm install sequelize pg pg-hstore

Sequelize使用示例：

const { Sequelize, DataTypes } = require('sequelize');

// 创建Sequelize实例

const sequelize = new Sequelize('database', 'username', 'password', {

host: 'localhost',

dialect: 'postgres'

});

// 定义模型

const User = sequelize.define('User', {

username: {

type: DataTypes.STRING,

allowNull: false

},

email: {

type: DataTypes.STRING,

allowNull: false,

unique: true

}

});

// 同步模型到数据库

sequelize.sync();

// 查询示例

async function getUsers() {

try {

const users = await User.findAll();

return users;

} catch (err) {

console.error(err);

throw err;

}

}

// 创建示例

async function createUser(userData) {

try {

const user = await User.create(userData);

return user;

} catch (err) {

console.error(err);

throw err;

}

}

6.3.2 Mongoose（MongoDB ODM）

# 安装Mongoose

npm install mongoose

Mongoose使用示例：

const mongoose = require('mongoose');

// 连接到MongoDB

mongoose.connect('mongodb://localhost/mydatabase', {

useNewUrlParser: true,

useUnifiedTopology: true

});

// 定义Schema

const userSchema = new mongoose.Schema({

username: {

type: String,

required: true,

unique: true

},

email: {

type: String,

required: true,

unique: true

}

});

// 创建模型

const User = mongoose.model('User', userSchema);

// 查询示例

async function getUsers() {

try {

const users = await User.find();

return users;

} catch (err) {

console.error(err);

throw err;

}

}

// 创建示例

async function createUser(userData) {

try {

const user = new User(userData);

await user.save();

return user;

} catch (err) {

console.error(err);

throw err;

}

}

7. 身份验证与安全

7.1 JWT身份验证

JWT（JSON Web Token）是一种开放标准，用于在各方之间安全地传输信息：

# 安装JWT相关包

npm install jsonwebtoken bcryptjs

JWT实现示例：

const jwt = require('jsonwebtoken');

const bcrypt = require('bcryptjs');

// 密钥，实际应用中应该存储在环境变量中

const JWT_SECRET = 'your-secret-key';

// 哈希密码

async function hashPassword(password) {

const salt = await bcrypt.genSalt(10);

return bcrypt.hash(password, salt);

}

// 验证密码

async function verifyPassword(password, hashedPassword) {

return bcrypt.compare(password, hashedPassword);

}

// 生成JWT

function generateToken(user) {

return jwt.sign(

{ id: user.id, username: user.username },

JWT_SECRET,

{ expiresIn: '1h' }

);

}

// 验证JWT中间件

function authenticateToken(req, res, next) {

const authHeader = req.headers['authorization'];

const token = authHeader && authHeader.split(' ')[1];

if (!token) {

return res.status(401).json({ message: 'Authentication required' });

}

jwt.verify(token, JWT_SECRET, (err, user) => {

if (err) {

return res.status(403).json({ message: 'Invalid or expired token' });

}

req.user = user;

next();

});

}

// 登录路由

app.post('/api/login', async (req, res) => {

try {

const { username, password } = req.body;

// 查找用户

const user = await User.findOne({ where: { username } });

if (!user) {

return res.status(401).json({ message: 'Invalid credentials' });

}

// 验证密码

const isValidPassword = await verifyPassword(password, user.password);

if (!isValidPassword) {

return res.status(401).json({ message: 'Invalid credentials' });

}

// 生成JWT

const token = generateToken(user);

res.json({ token });

} catch (err) {

console.error(err);

res.status(500).json({ message: 'Server error' });

}

});

// 受保护的路由

app.get('/api/profile', authenticateToken, (req, res) => {

res.json({ message: 'Access granted', user: req.user });

});

7.2 OAuth认证

OAuth是一种开放标准的授权协议，允许用户授权第三方应用访问他们存储在其他服务提供商上的信息：

# 安装Passport和OAuth策略

npm install passport passport-google-oauth20 express-session

Google OAuth实现示例：

const passport = require('passport');

const GoogleStrategy = require('passport-google-oauth20').Strategy;

const session = require('express-session');

// 配置Passport

passport.use(new GoogleStrategy({

clientID: 'YOUR_GOOGLE_CLIENT_ID',

clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',

callbackURL: 'http://localhost:3000/auth/google/callback'

},

function(accessToken, refreshToken, profile, cb) {

// 查找或创建用户

User.findOrCreate({ googleId: profile.id }, function (err, user) {

return cb(err, user);

});

}

));

// 序列化和反序列化用户

passport.serializeUser(function(user, done) {

done(null, user.id);

});

passport.deserializeUser(function(id, done) {

User.findById(id, function(err, user) {

done(err, user);

});

});

// 使用express-session中间件

app.use(session({

secret: 'your-session-secret',

resave: false,

saveUninitialized: false

}));

// 初始化Passport

app.use(passport.initialize());

app.use(passport.session());

// Google认证路由

app.get('/auth/google',

passport.authenticate('google', { scope: ['profile'] }));

app.get('/auth/google/callback',

passport.authenticate('google', { failureRedirect: '/login' }),

function(req, res) {

// 成功认证后重定向

res.redirect('/');

});

// 受保护的路由

function ensureAuthenticated(req, res, next) {

if (req.isAuthenticated()) {

return next();

}

res.redirect('/login');

}

app.get('/profile', ensureAuthenticated, function(req, res) {

res.render('profile', { user: req.user });

});

7.3 安全最佳实践

输入验证：始终验证和清理用户输入，防止SQL注入和XSS攻击。

// 使用validator库进行输入验证

const validator = require('validator');

function validateEmail(email) {

if (!validator.isEmail(email)) {

throw new Error('Invalid email format');

}

return validator.normalizeEmail(email);

}

function validatePassword(password) {

if (!validator.isLength(password, { min: 8 })) {

throw new Error('Password must be at least 8 characters');

}

return password;

}

HTTPS：在生产环境中始终使用HTTPS加密通信。

CORS：配置适当的CORS策略，限制跨域请求。

const cors = require('cors');

// 基本CORS配置

app.use(cors());

// 自定义CORS配置

app.use(cors({

origin: 'https://example.com',

methods: ['GET', 'POST'],

allowedHeaders: ['Content-Type', 'Authorization']

}));

Helmet：使用Helmet中间件设置安全相关的HTTP头。

const helmet = require('helmet');

app.use(helmet());

速率限制：防止暴力攻击和DDoS攻击。

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({

windowMs: 15 * 60 * 1000, // 15分钟

max: 100 // 每个IP限制100个请求

});

app.use(limiter);

8. 项目实战：构建一个完整的全栈应用

让我们通过一个实际项目来综合运用前面学到的知识。我们将构建一个简单的任务管理应用，包括用户认证、任务CRUD操作等功能。

8.1 项目初始化

首先，创建项目结构：

# 创建项目目录

mkdir task-manager

cd task-manager

# 初始化前端项目

npx create-react-app client

# 创建后端目录

mkdir server

cd server

# 初始化后端项目

npm init -y

# 安装后端依赖

npm install express cors bcryptjs jsonwebtoken mongoose dotenv

npm install --save-dev nodemon

8.2 后端实现

8.2.1 服务器配置

创建server/index.js：

require('dotenv').config();

const express = require('express');

const cors = require('cors');

const mongoose = require('mongoose');

const authRoutes = require('./routes/auth');

const taskRoutes = require('./routes/tasks');

const app = express();

const PORT = process.env.PORT || 5000;

// 中间件

app.use(cors());

app.use(express.json());

// 数据库连接

mongoose.connect(process.env.MONGODB_URI, {

useNewUrlParser: true,

useUnifiedTopology: true

})

.then(() => console.log('MongoDB connected'))

.catch(err => console.error(err));

// 路由

app.use('/api/auth', authRoutes);

app.use('/api/tasks', taskRoutes);

app.listen(PORT, () => {

console.log(`Server running on port ${PORT}`);

});

8.2.2 数据模型

创建server/models/User.js：

const mongoose = require('mongoose');

const bcrypt = require('bcryptjs');

const userSchema = new mongoose.Schema({

username: {

type: String,

required: true,

unique: true

},

email: {

type: String,

required: true,

unique: true

},

password: {

type: String,

required: true

}

});

// 密码加密中间件

userSchema.pre('save', async function(next) {

if (!this.isModified('password')) {

return next();

}

try {

const salt = await bcrypt.genSalt(10);

this.password = await bcrypt.hash(this.password, salt);

next();

} catch (err) {

next(err);

}

});

// 验证密码方法

userSchema.methods.comparePassword = async function(candidatePassword) {

return bcrypt.compare(candidatePassword, this.password);

};

module.exports = mongoose.model('User', userSchema);

创建server/models/Task.js：

const mongoose = require('mongoose');

const taskSchema = new mongoose.Schema({

title: {

type: String,

required: true

},

description: {

type: String

},

completed: {

type: Boolean,

default: false

},

user: {

type: mongoose.Schema.Types.ObjectId,

ref: 'User',

required: true

}

}, {

timestamps: true

});

module.exports = mongoose.model('Task', taskSchema);

8.2.3 认证中间件

创建server/middleware/auth.js：

const jwt = require('jsonwebtoken');

const User = require('../models/User');

const auth = async (req, res, next) => {

try {

const token = req.header('Authorization').replace('Bearer ', '');

if (!token) {

return res.status(401).json({ message: 'No token, authorization denied' });

}

const decoded = jwt.verify(token, process.env.JWT_SECRET);

const user = await User.findById(decoded.id);

if (!user) {

return res.status(401).json({ message: 'Token is not valid' });

}

req.user = user;

next();

} catch (err) {

res.status(401).json({ message: 'Token is not valid' });

}

};

module.exports = auth;

8.2.4 路由

创建server/routes/auth.js：

const express = require('express');

const jwt = require('jsonwebtoken');

const User = require('../models/User');

const router = express.Router();

// 注册

router.post('/register', async (req, res) => {

try {

const { username, email, password } = req.body;

// 检查用户是否已存在

let user = await User.findOne({ email });

if (user) {

return res.status(400).json({ message: 'User already exists' });

}

// 创建新用户

user = new User({

username,

email,

password

});

await user.save();

// 创建JWT

const payload = {

id: user.id

};

jwt.sign(

payload,

process.env.JWT_SECRET,

{ expiresIn: '1h' },

(err, token) => {

if (err) throw err;

res.json({ token });

}

);

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

// 登录

router.post('/login', async (req, res) => {

try {

const { email, password } = req.body;

// 检查用户是否存在

let user = await User.findOne({ email });

if (!user) {

return res.status(400).json({ message: 'Invalid credentials' });

}

// 验证密码

const isMatch = await user.comparePassword(password);

if (!isMatch) {

return res.status(400).json({ message: 'Invalid credentials' });

}

// 创建JWT

const payload = {

id: user.id

};

jwt.sign(

payload,

process.env.JWT_SECRET,

{ expiresIn: '1h' },

(err, token) => {

if (err) throw err;

res.json({ token });

}

);

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

module.exports = router;

创建server/routes/tasks.js：

const express = require('express');

const auth = require('../middleware/auth');

const Task = require('../models/Task');

const router = express.Router();

// 获取所有任务

router.get('/', auth, async (req, res) => {

try {

const tasks = await Task.find({ user: req.user.id });

res.json(tasks);

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

// 创建新任务

router.post('/', auth, async (req, res) => {

try {

const { title, description } = req.body;

const newTask = new Task({

title,

description,

user: req.user.id

});

const task = await newTask.save();

res.json(task);

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

// 更新任务

router.put('/:id', auth, async (req, res) => {

try {

const { title, description, completed } = req.body;

// 检查任务是否存在且属于当前用户

let task = await Task.findById(req.params.id);

if (!task) {

return res.status(404).json({ message: 'Task not found' });

}

if (task.user.toString() !== req.user.id) {

return res.status(401).json({ message: 'Not authorized' });

}

// 更新任务

task = await Task.findByIdAndUpdate(

req.params.id,

{ $set: { title, description, completed } },

{ new: true }

);

res.json(task);

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

// 删除任务

router.delete('/:id', auth, async (req, res) => {

try {

// 检查任务是否存在且属于当前用户

let task = await Task.findById(req.params.id);

if (!task) {

return res.status(404).json({ message: 'Task not found' });

}

if (task.user.toString() !== req.user.id) {

return res.status(401).json({ message: 'Not authorized' });

}

// 删除任务

await Task.findByIdAndRemove(req.params.id);

res.json({ message: 'Task removed' });

} catch (err) {

console.error(err.message);

res.status(500).send('Server error');

}

});

module.exports = router;

8.2.5 环境变量

创建server/.env文件：

MONGODB_URI=your_mongodb_connection_string

JWT_SECRET=your_jwt_secret

PORT=5000

8.3 前端实现

8.3.1 安装依赖

cd client

npm install axios react-router-dom

8.3.2 配置API客户端

创建client/src/api/index.js：

import axios from 'axios';

const api = axios.create({

baseURL: 'http://localhost:5000/api'

});

// 设置请求拦截器，添加JWT token

api.interceptors.request.use(

config => {

const token = localStorage.getItem('token');

if (token) {

config.headers.Authorization = `Bearer ${token}`;

}

return config;

},

error => {

return Promise.reject(error);

}

);

export default api;

8.3.3 认证组件

创建client/src/components/Auth/Register.js：

import React, { useState } from 'react';

import { Link } from 'react-router-dom';

import api from '../../api';

const Register = ({ history }) => {

const [formData, setFormData] = useState({

username: '',

email: '',

password: '',

confirmPassword: ''

});

const [error, setError] = useState('');

const { username, email, password, confirmPassword } = formData;

const onChange = e => {

setFormData({ ...formData, [e.target.name]: e.target.value });

};

const onSubmit = async e => {

e.preventDefault();

if (password !== confirmPassword) {

setError('Passwords do not match');

return;

}

try {

const response = await api.post('/auth/register', {

username,

email,

password

});

localStorage.setItem('token', response.data.token);

history.push('/dashboard');

} catch (err) {

setError(err.response.data.message || 'Registration failed');

}

};

return (

);

};

export default Register;

创建client/src/components/Auth/Login.js：

import React, { useState } from 'react';

import { Link } from 'react-router-dom';

import api from '../../api';

const Login = ({ history }) => {

const [formData, setFormData] = useState({

email: '',

password: ''

});

const [error, setError] = useState('');

const { email, password } = formData;

const onChange = e => {

setFormData({ ...formData, [e.target.name]: e.target.value });

};

const onSubmit = async e => {

e.preventDefault();

try {

const response = await api.post('/auth/login', {

email,

password

});

localStorage.setItem('token', response.data.token);

history.push('/dashboard');

} catch (err) {

setError(err.response.data.message || 'Login failed');

}

};

return (

);

};

export default Login;

8.3.4 任务管理组件

创建client/src/components/Tasks/TaskList.js：

import React, { useState, useEffect } from 'react';

import api from '../../api';

import TaskForm from './TaskForm';

import TaskItem from './TaskItem';

const TaskList = () => {

const [tasks, setTasks] = useState([]);

const [loading, setLoading] = useState(true);

const [error, setError] = useState('');

useEffect(() => {

fetchTasks();

}, []);

const fetchTasks = async () => {

try {

const response = await api.get('/tasks');

setTasks(response.data);

setLoading(false);

} catch (err) {

setError('Failed to fetch tasks');

setLoading(false);

}

};

const addTask = async task => {

try {

const response = await api.post('/tasks', task);

setTasks([...tasks, response.data]);

} catch (err) {

setError('Failed to add task');

}

};

const updateTask = async (id, updatedTask) => {

try {

const response = await api.put(`/tasks/${id}`, updatedTask);

setTasks(tasks.map(task => (task._id === id ? response.data : task)));

} catch (err) {

setError('Failed to update task');

}

};

const deleteTask = async id => {

try {

await api.delete(`/tasks/${id}`);

setTasks(tasks.filter(task => task._id !== id));

} catch (err) {

setError('Failed to delete task');

}

};

if (loading) return

;

if (error) return

;

return (

);

};

export default TaskList;

创建client/src/components/Tasks/TaskForm.js：

import React, { useState } from 'react';

const TaskForm = ({ addTask }) => {

const [formData, setFormData] = useState({

title: '',

description: ''

});

const { title, description } = formData;

const onChange = e => {

setFormData({ ...formData, [e.target.name]: e.target.value });

};

const onSubmit = e => {

e.preventDefault();

if (title.trim() === '') return;

addTask({

title,

description

});

setFormData({

title: '',

description: ''

});

};

return (

type="text"

name="title"

value={title}

onChange={onChange}

placeholder="Task title"

required

/>

name="description"

value={description}

onChange={onChange}

placeholder="Task description"

/>

Add Task

);

};

export default TaskForm;

创建client/src/components/Tasks/TaskItem.js：

import React, { useState } from 'react';

const TaskItem = ({ task, updateTask, deleteTask }) => {

const [isEditing, setIsEditing] = useState(false);

const [formData, setFormData] = useState({

title: task.title,

description: task.description,

completed: task.completed

});

const { title, description, completed } = formData;

const onChange = e => {

setFormData({ ...formData, [e.target.name]: e.target.value });

};

const onToggle = () => {

setFormData({ ...formData, completed: !completed });

updateTask(task._id, { ...formData, completed: !completed });

};

const onUpdate = e => {

e.preventDefault();

updateTask(task._id, formData);

setIsEditing(false);

};

return (

);

};

export default TaskItem;

8.3.5 路由配置

修改client/src/App.js：

import React from 'react';

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

import Login from './components/Auth/Login';

import Register from './components/Auth/Register';

import TaskList from './components/Tasks/TaskList';

import Navbar from './components/Layout/Navbar';

function App() {

return (

);

}

// 私有路由组件

const PrivateRoute = ({ component: Component, ...rest }) => {

const isAuthenticated = !!localStorage.getItem('token');

return (

{...rest}

render={props =>

isAuthenticated ? (

) : (

)

}

/>

);

};

export default App;

8.3.6 导航栏组件

创建client/src/components/Layout/Navbar.js：

import React from 'react';

import { Link } from 'react-router-dom';

const Navbar = () => {

const isAuthenticated = !!localStorage.getItem('token');

const logout = () => {

localStorage.removeItem('token');

window.location.href = '/login';

};

return (

);

};

export default Navbar;

8.4 运行应用

8.4.1 启动后端服务器

cd server

npm start

8.4.2 启动前端开发服务器

cd client

npm start

现在，你可以在浏览器中访问http://localhost:3000，并开始使用这个任务管理应用。

9. 部署与优化

9.1 前端部署

9.1.1 构建生产版本

cd client

npm run build

这将创建一个build目录，包含优化后的生产版本文件。

9.1.2 静态文件托管

你可以使用Nginx、Apache或任何静态文件托管服务来托管构建后的文件。以下是Nginx配置示例：

server {

listen 80;

server_name your-domain.com;

location / {

root /path/to/your/client/build;

try_files $uri /index.html;

}

location /api {

proxy_pass http://localhost:5000;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection 'upgrade';

proxy_set_header Host $host;

proxy_cache_bypass $http_upgrade;

}

}

9.2 后端部署

9.2.1 使用PM2管理Node.js进程

# 安装PM2

npm install -g pm2

# 启动应用

pm2 start server/index.js --name "task-manager-api"

# 设置PM2开机自启

pm2 startup

pm2 save

9.2.2 使用Docker容器化

创建server/Dockerfile：

FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 5000

CMD ["node", "index.js"]

创建docker-compose.yml：

version: '3'

services:

api:

build: ./server

ports:

- "5000:5000"

environment:

- MONGODB_URI=mongodb://mongo:27017/taskmanager

- JWT_SECRET=your_jwt_secret

- NODE_ENV=production

depends_on:

- mongo

client:

build: ./client

ports:

- "80:80"

depends_on:

- api

mongo:

image: mongo

ports:

- "27017:27017"

volumes:

- mongo-data:/data/db

volumes:

mongo-data:

构建和运行容器：

docker-compose up -d

9.3 性能优化

9.3.1 前端优化

代码分割：使用React.lazy和Suspense进行组件级别的代码分割。

const Dashboard = React.lazy(() => import('./components/Dashboard'));

function App() {

return (

Loading...