当前位置：首页 > news >正文

部署前端项目

news 来源：原创 2024/9/20 12:03:02

常见部署方式有：静态托管服务、服务器部署

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;}}