Web类型网站在阿里云服务器（Ubuntu）部署的详细步骤

本文链接：https://blog.youkuaiyun.com/html7123/article/details/148492215

xx网站部署指南

本文档提供了将百善家政网站部署到阿里云Ubuntu服务器的完整步骤，包括环境配置、代码部署、问题排查和访问方法。

前提条件

已购买阿里云ECS服务器（Ubuntu系统）
服务器IP地址：xxx.xxx.xx.xx(申请服务器的公网IP)
服务器用户名：root（Ubuntu）
本地已安装SSH客户端
已有xxx网站的源代码

连接到服务器

使用SSH连接到阿里云服务器：

ssh root@xxx.xxx.xxx(服务器IP地址)

首次连接时，系统会提示您确认服务器的指纹，输入yes继续。然后输入您的服务器密码。

环境配置

系统更新

首先，更新系统软件包：

# 更新软件包列表
apt update 

# 升级已安装的软件包
apt upgrade -y

安装Node.js

在中国大陆服务器上，直接访问GitHub可能会遇到连接问题，因此我们使用替代方法安装Node.js：

问题1：GitHub连接超时，无法安装NVM

解决方案：使用替代方法安装Node.js

# 方法1：使用apt安装
# 添加Node.js官方PPA
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -

# 安装Node.js和npm
apt install -y nodejs

问题2：软件包冲突

解决方案：移除冲突的包

# 移除冲突的包
apt remove -y libnode-dev nodejs

# 清理可能的残留
apt autoremove -y

# 清理apt缓存
apt clean
apt update

# 重新尝试安装Node.js
apt install -y nodejs

如果上述方法不起作用，可以尝试手动安装二进制文件：

# 下载Node.js二进制包
cd /tmp
wget https://npmmirror.com/mirrors/node/v18.19.1/node-v18.19.1-linux-x64.tar.gz

# 解压到/usr/local
mkdir -p /usr/local/lib/nodejs
tar -xzf node-v18.19.1-linux-x64.tar.gz -C /usr/local/lib/nodejs

# 设置环境变量
echo 'export PATH=/usr/local/lib/nodejs/node-v18.19.1-linux-x64/bin:$PATH' >> ~/.profile
source ~/.profile

# 创建符号链接
ln -sf /usr/local/lib/nodejs/node-v18.19.1-linux-x64/bin/node /usr/bin/node
ln -sf /usr/local/lib/nodejs/node-v18.19.1-linux-x64/bin/npm /usr/bin/npm

# 验证安装
node -v
npm -v

安装Nginx

# 安装Nginx
apt install -y nginx

# 启动Nginx并设置为开机自启
systemctl start nginx
systemctl enable nginx

代码部署

创建项目目录

# 创建网站目录
mkdir -p /var/www
cd /var/www

克隆代码

如果您有Git仓库：

# 克隆代码仓库
git clone <您的仓库URL> 文件夹aa
cd 文件夹aa

或者，您可以通过SFTP/SCP上传代码到服务器。

安装依赖

# 进入项目目录
cd /var/www/文件夹aa
# 安装依赖
npm install 

# 如果遇到网络问题，可以使用淘宝镜像
npm config set registry https://registry.npmmirror.com
npm install

项目构建

问题3：缺少.next目录

解决方案：需要先运行build命令

在构建之前，我们需要创建或修改Next.js配置文件：

# 编辑next.config.js
nano next.config.js

添加以下内容：

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',
  poweredByHeader: false,
  compress: true,
  eslint: {
    ignoreDuringBuilds: true,  // 禁用ESLint检查
  },
  typescript: {
    ignoreBuildErrors: true,
  },
};

module.exports = nextConfig;

问题4：构建过程中遇到ESLint错误

解决方案：通过修改next.config.js禁用ESLint检查（如上配置所示）

然后执行构建：

# 构建项目
NODE_ENV=production npm run build

问题5：构建错误，与CSS优化相关

解决方案：移除experimental.optimizeCss选项或使用静态导出方式

# 编辑package.json
nano package.json

# 修改build脚本为
# "build": "next build && next export"

# 然后重新构建
npm run build

配置Nginx

问题6：Nginx配置问题

解决方案：创建正确的配置文件和符号链接

创建Nginx配置文件：

# 创建配置文件
nano /etc/nginx/sites-available/baishanjz

对于服务器端渲染(SSR)模式

如果使用标准的Next.js构建（非静态导出），添加以下配置：

server {
    listen 80;
    server_name xxx.xxx.xxx; # 替换为您的域名或IP

    # 设置正确的根目录
    root /var/www/文件夹aa;
    
    # 处理API请求和SSR
    location / {
        proxy_pass http://localhost:3000;
        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;
        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;
    }
    
    # 静态资源处理
    location /_next/static/ {
        alias /var/www/baishanjz/.next/static/;
        expires 365d;
        access_log off;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }
    
    # 公共资源处理
    location /images/ {
        alias /var/www/baishanjz/public/images/;
        expires 365d;
        access_log off;
    }
    
    # 其他静态文件
    location ~ ^/(favicon\.ico|robots\.txt|sitemap\.xml)$ {
        root /var/www/baishanjz/public;
        expires 30d;
        access_log off;
    }
}

对于静态导出模式

如果使用静态导出（next export），添加以下配置：

server {
    listen 80;
    server_name xxx.xxx.xxx;
    
    root /var/www/文件夹aa/out;
    index index.html;
    
    location / {
        try_files $uri $uri.html $uri/ /index.html;
    }
    
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, max-age=2592000";
        access_log off;
    }
}

启用配置并重启Nginx：

# 创建符号链接
ln -s /etc/nginx/sites-available/baishanjz /etc/nginx/sites-enabled/

# 测试Nginx配置
nginx -t

# 重启Nginx
systemctl restart nginx

使用PM2管理应用

对于SSR模式，我们需要使用PM2来管理Node.js应用：

# 全局安装PM2
npm install -g pm2

# 启动应用
cd /var/www/文件夹aa
pm2 start npm --name "文件夹aa" -- start

# 设置PM2开机自启动
pm2 startup
pm2 save

检查应用状态：

pm2 status

问题排查与解决

Node.js安装问题

如果遇到Node.js安装问题，可以尝试：

使用国内镜像
手动下载二进制文件安装
检查系统架构是否兼容

Nginx配置问题

如果Nginx配置测试失败：

# 检查配置文件语法
nginx -t

# 检查错误日志
tail -f /var/log/nginx/error.log

确保所有路径和文件名都正确，特别是项目目录名（baishanjz）。

构建错误

如果构建过程中遇到错误：

检查项目依赖是否完整安装
禁用ESLint和TypeScript检查
尝试静态导出方式

样式丢失问题

问题7：网站部署后样式丢失

解决方案：修复Nginx静态资源配置和next.config.js中的拼写错误

检查浏览器开发者工具中的网络请求，查找404错误
确保Nginx配置正确处理静态资源路径
验证.next/static目录中是否有CSS文件
修复next.config.js中的拼写错误：
- 将 assetPreFix 改为 assetPrefix
- 将 experimewntal 改为 experimental

网站访问方式

IP地址访问

任何人都可以通过在浏览器中输入服务器IP地址来访问网站：

http://xxx.xxx.xxx

域名访问

如果您有域名，可以配置DNS解析并更新Nginx配置：

在域名注册商处添加A记录，指向服务器IP
更新Nginx配置中的server_name
配置SSL证书（推荐）

# 安装Certbot
apt install -y certbot python3-certbot-nginx

# 获取证书并自动配置Nginx
certbot --nginx -d yourdomain.com -d www.yourdomain.com

维护与更新

更新网站代码

当需要更新网站时，执行以下步骤：

cd /var/www/baishanjz

# 拉取最新代码（如果使用Git）
git pull

# 安装依赖
npm install

# 构建项目
npm run build

# 重启应用（对于SSR模式）
pm2 restart baishanjz

# 或者无需重启（对于静态导出模式）

系统维护

定期执行以下维护任务：

# 更新系统软件包
apt update
apt upgrade -y

# 监控服务器资源
htop
df -h

# 检查日志
tail -f /var/log/nginx/error.log
pm2 logs

部署总结

环境准备
- 更新系统软件包
- 安装Node.js（解决GitHub连接超时问题）
- 安装Nginx
代码部署
- 创建项目目录
- 上传或克隆代码
- 安装依赖
- 修改next.config.js（禁用ESLint检查）
- 构建项目（解决.next目录缺失问题）
配置Nginx
- 创建正确的配置文件
- 设置静态资源路径
- 创建符号链接
- 重启Nginx
应用管理
- 使用PM2启动应用
- 配置PM2开机自启动
问题解决
- 修复软件包冲突
- 修复Nginx配置
- 修复构建错误
- 修复样式丢失问题（修正拼写错误）