umi部署到服务器,vps服务器租用和云服务维护,vps香港备份,openvps,vps服务器登陆

🗣 Wd提问: umi部署到服务器

🤖 Ai回答:
部署 UMI 项目到服务器是一个常见的操作。下面我将为您提供一个完整、清晰的部署指南，涵盖从项目构建到服务器配置的整个流程。

部署流程概览

1、本地构建：将 UMI 项目编译成静态文件（HTML, CSS, JS）。
2、服务器准备：确保服务器有运行 Web 服务的环境（如 Nginx）。
3、文件上传：将构建好的静态文件上传到服务器。
4、服务器配置：配置 Web 服务器（如 Nginx）来托管这些文件。
5、域名与 SSL（可选）：绑定域名并配置 HTTPS。

第一步：本地构建 UMI 项目

在部署之前，您需要在本地将 UMI 项目打包成生产环境使用的静态文件。

1、打开终端，进入您的 UMI 项目根目录。
2、安装依赖（如果 `node_modules` 不存在）：
bash
npm install
或
yarn install

3、执行构建命令：
bash
npm run build
或
yarn build

4、获取构建产物：构建成功后，项目根目录下会生成一个 `dist` 文件夹（默认路径，可在 `config.ts` 中配置 `outputPath`）。这个文件夹里的所有文件就是需要部署到服务器的静态资源。

第二步：服务器环境准备

您需要一台拥有公网 IP 的服务器（如阿里云 ECS、腾讯云 CVM 等）。这里以最常用的 Nginx 作为 Web 服务器为例。

1、登录您的服务器（通常通过 SSH）。
bash
ssh root@your_server_ip

2、更新系统并安装 Nginx（以 CentOS/AlmaLinux/Rocky Linux 为例）：
bash
yum update -y
yum install nginx -y

（如果是 Ubuntu/Debian，使用 `apt update && apt install nginx -y`）

3、启动并设置 Nginx 开机自启：
bash
systemctl start nginx
systemctl enable nginx

4、配置防火墙：确保防火墙允许 HTTP(80) 和 HTTPS(443) 流量。
bash
firewall-cmd permanent add-service=http
firewall-cmd permanent add-service=https
firewall-cmd reload

现在，在浏览器访问 `http://your_server_ip`，应该能看到 Nginx 的欢迎页面。

第三步：上传文件到服务器

将本地的 `dist` 文件夹上传到服务器。有几种常见方法：

方法一：使用 `scp` 命令（简单直接）
在本地终端执行：
bash
scp -r ./dist root@your_server_ip:/usr/share/nginx/html/

这个命令会将本地的 `dist` 文件夹及其内容递归地复制到服务器的 Nginx 默认根目录下。

方法二：使用 Git（如果项目有版本控制）
在服务器上克隆仓库，然后执行 `build`。
bash
在服务器上操作
cd /usr/share/nginx/html/
git clone your_git_repository_url
cd your_project_name
npm run build
构建产物可能在项目内的 dist 目录，需要将其移动到合适位置

方法三：使用 FTP/SFTP 工具（如 FileZilla）
使用图形化工具连接服务器，直接将本地的 `dist` 文件夹拖拽到服务器的目标目录（如 `/usr/share/nginx/html/`）。

第四步：配置 Nginx 服务器

这是最关键的一步，我们需要告诉 Nginx 如何服务我们的 UMI 应用。

1、进入 Nginx 配置目录：
bash
cd /etc/nginx/conf.d

2、创建一个新的配置文件，例如 `umi-app.conf`：
bash
vi umi-app.conf

3、将以下配置内容粘贴进去，并根据您的实际情况修改（特别是 `server_name` 和 `root` 路径）：

nginx
server {
listen 80;
将 your_domain.com 替换为您的域名，如果没有域名就用服务器IP，此项可留空或删除
server_name your_domain.com;

根目录，指向你上传的 dist 文件夹
如果你把 dist 里的内容直接放在了 /usr/share/nginx/html/，那么 root 应该是 /usr/share/nginx/html;
root /usr/share/nginx/html/dist;
index index.html index.htm;

防止刷新或直接访问路由时出现 404
这是 SPA（单页应用）历史路由模式的关键配置
location / {
try_files $uri $uri/ /index.html;
}

可选：优化静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1y;
add_header Cache-Control public, immutable;
}

可选：代理 API 请求到后端服务（如果 UMI 配置了 proxy）
location /api/ {
proxy_pass http://your_backend_api_address;
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;
}
}

重要提示：
* `try_files $uri $uri/ /index.html;` 这行配置对于使用 `history` 路由模式的 UMI 应用至关重要。它确保在直接访问非根路径或刷新页面时，Nginx 会返回 `index.html`，然后由前端的 React Router 来处理路由，从而避免 404 错误。
* 如果你的 UMI 项目构建后，`dist` 文件夹里还有一个 `dist` 文件夹，那么 `root` 应该设置为 `/usr/share/nginx/html/dist/dist`。请根据实际情况检查路径。

4、保存并退出编辑器（在 vi 中按 `Esc`，然后输入 `:wq`）。
5、测试 Nginx 配置是否正确：
bash
nginx -t

如果显示 `syntax is ok` 和 `test is successful`，则说明配置正确。
6、重新加载 Nginx 使配置生效：
bash
systemctl reload nginx

第五步：测试与访问

现在，您可以在浏览器中访问您的服务器 IP 或绑定的域名（例如 `http://your_server_ip`），应该能看到部署成功的 UMI 应用了。

尝试点击页面内的链接并刷新页面，确认路由工作正常。

进阶操作（可选）

1、使用 PM2 管理 Node.js 服务（如果是 SSR 服务端渲染）

如果您的 UMI 项目是服务端渲染（SSR）模式，构建产物不是一个纯粹的静态 `dist` 文件夹，而是一个可以运行的 Node.js 服务。

1、在服务器上全局安装 PM2：
bash
npm install pm2 -g

2、将整个项目（包括 `package.json`， `dist` 等）上传到服务器，例如 `/var/www/umi-ssr-app`。
3、进入项目目录，安装生产依赖：
bash
npm install production

4、使用 PM2 启动服务：
bash
假设你的启动命令在 package.json 中定义为 start: umi-serve
pm2 start npm name umi-ssr-app run start

5、保存 PM2 进程列表，以便服务器重启后自动恢复：
bash
pm2 save
pm2 startup

6、此时，你的 SSR 服务运行在某个端口（如 `7001`）。你需要配置 Nginx 作为反向代理，将流量转发到这个端口。Nginx 配置中的 `location /` 块会变成：
nginx
location / {
proxy_pass http://localhost:7001;
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;
}

2、配置 HTTPS（使用 SSL 证书）

可以使用 Let‘s Encrypt 的 Certbot 工具免费获取 SSL 证书。

1、安装 Certbot：
bash
对于 CentOS 7+
yum install certbot python3-certbot-nginx -y

对于 Ubuntu
apt install certbot python3-certbot-nginx -y

2、运行 Certbot 并遵循指引（它会自动修改你的 Nginx 配置）：
bash
certbot nginx

3、完成后，你的网站就可以通过 `https://your_domain.com` 安全访问了。

总结

部署 UMI 项目到服务器的核心步骤可以简化为：构建上传配置 Nginx（重点是 `try_files`）。对于纯静态的 CSR（客户端渲染）应用，这个过程非常 straightforward。如果是 SSR 应用，则需要额外使用 PM2 等进程管理工具。

希望这个详细的指南能帮助您成功部署 UMI 应用！

Ai作答

📣 商家广告：