常见部署方式有:静态托管服务、服务器部署
1. 静态托管服务
使用平台部署代码,比如 GitHub。
| 创建一个仓库,仓库名一般是 yourGithubName.github.io。
| 将打包后的静态文件文件上传到仓库。
| 在“Settings”(选项)选项卡中,找到“Pages”(页面)部分。
| 选择要部署的分支(通常是 main 分支)。
| 点击“Save”(保存)。
| GitHub 完成部署后,会在“Pages”部分显示部署成功的链接,您可以通过该链接访问您的静态网站。
2. 服务器部署
购买服务器,选择 Linux 服务器,操作系统选择 CentOS,安装 Nginx,配置服务器指向项目的静态文件目录。将前端打包文件上传到指定目录。配置 Nginx。Nginx 的配置文件通常位于 /etc/nginx/sites-available/ 目录下。创建一个新的配置文件,例如 your_domain.conf。配置如下:
server {listen 80; # 监听 80 端口,您也可以根据需求修改为其他端口server_name your_domain.com; # 替换为您的域名root /path/to/your/frontend/files; # 替换为前端项目文件的实际路径location / {try_files $uri $uri/ /index.html; # 确保任何请求都能正确加载到 index.html}}
启用配置:创建一个符号链接将配置文件从 sites-available 目录链接到 sites-enabled 目录:
sudo ln -s /etc/nginx/sites-available/your_domain.conf /etc/nginx/sites-enabled/
检查配置:使用以下命令检查配置是否正确:
sudo nginx -t
重新加载 Nginx 使配置生效:
sudo systemctl reload nginx
例如,如果您的前端项目文件位于 /var/www/your_project ,域名是 example.com ,配置文件可能如下:
server {listen 80;server_name example.com;root /var/www/your_project;location / {try_files $uri $uri/ /index.html;}}
在 Nginx 中部署两个前端项目。打开 Nginx 的配置文件,通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/sites-available/default。添加两个 server 块来分别配置两个项目。
server {listen 8080; # 第一个项目监听 8080 端口server_name project1.example.com; # 项目 1 的域名root /path/to/project1; # 项目 1 的根目录index index.html; # 项目 1 的默认索引文件location / {try_files $uri $uri/ /index.html;}}server {listen 8081; # 第二个项目监听 8081 端口server_name project2.example.com; # 项目 2 的域名root /path/to/project2; # 项目 2 的根目录index index.html; # 项目 2 的默认索引文件location / {try_files $uri $uri/ /index.html;}}