如何将Angular应用部署到Laravel Forge？

前提准备 #

本地完成Angular项目开发，确保能正常构建生产包。运行以下命令生成静态资源：

ng build --configuration production

执行后项目根目录会生成dist/[你的项目名称]文件夹，包含所有可部署的静态文件。

1. 在Forge创建静态站点 #

登录Laravel Forge后台，进入目标服务器：

• 点击Sites → Add Site
• 填写你的域名，站点类型选择Static HTML，完成站点创建。

2. 配置部署脚本 #

进入站点的Deployment标签，替换默认脚本为以下内容（根据你的仓库分支、项目名调整）：

cd /home/forge/[你的域名]
git pull origin main
# 若需在服务器构建，先安装依赖（本地构建可跳过此步）
npm install
# 构建生产包
ng build --configuration production
# 清空原静态文件目录，将构建产物迁移到Forge默认的public目录
rm -rf public/*
cp -r dist/[你的项目名称]/* public/

注意：如果选择在服务器构建Angular，需先在服务器安装Node.js和Angular CLI。通过Forge的SSH终端执行：

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs
npm install -g @angular/cli

3. 配置Nginx解决SPA路由问题 #

进入站点的Nginx标签，修改配置文件，确保location /块包含try_files规则，避免Angular路由刷新404：

server {
    listen 80;
    listen [::]:80;
    server_name [你的域名];
    root /home/forge/[你的域名]/public;

    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # 保留Forge默认的其他配置项
}

修改后点击Save，Forge会自动重启Nginx。

4. 触发部署 #

将Angular项目代码推送到你的Git仓库，回到Forge站点的Deployment页面，点击Deploy Now，等待部署完成后即可访问域名查看应用。

内容的提问来源于stack exchange，提问作者Ismail Muhammad