我正在尝试上传我的前端,以便通过 github 操作在 github 上托管和服务。我正在使用以下工作流程:
name: Deploy Frontend
on:
push:
branches: [main, staging, frontend]
paths:
- 'frontend/**'
- '.github/workflows/deploy_frontend.yml'
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
permissions:
contents: write
pages: write # Added for GitHub Pages deployment
id-token: write # Necessary for actions/deploy-pages
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- uses: actions/checkout@v4
- name: Debug REACT_APP_API_URL
shell: bash
run: |
echo -e "\e[32m@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@\e[0m"
echo -e "\e[32mREACT_APP_API_URL=${REACT_APP_API_URL}\e[0m"
env
echo $(env | grep ACTIONS_RUNTIME_TOKEN)
# exit 1 # Commented out to allow the workflow to continue
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Print Environment Variables and Secrets
shell: bash
env:
REACT_APP_ENVIRONMENT: ${{ env.REACT_APP_ENVIRONMENT }}
run: |
echo -e "\e[32mREACT_APP_API_URL=${REACT_APP_API_URL}\e[0m"
echo -e "\e[32mREACT_APP_ENVIRONMENT=${REACT_APP_ENVIRONMENT}\e[0m"
env
echo ACTIONS_RUNTIME_TOKEN=$(env | grep ACTIONS_RUNTIME_TOKEN)
- name: Install dependencies
shell: bash
run: |
cd frontend
npm ci 2>&1 || (echo -e "\e[31mInstall dependencies step failed.\e[0m" && exit 1)
- name: Build
shell: bash
run: |
cd frontend
mkdir -p build_logs
TIMESTAMP=$(date +"%Y%m%d_%H%M%S")
export REACT_APP_BUILD_TIME=$(TZ=America/Argentina/Buenos_Aires date +"%Y-%m-%d %H:%M:%S")
echo -e "\e[32mBuilding with environment variables:\e[0m"
env
echo -e "\e[32m$(pwd)\e[0m"
npm run build || (echo -e "\e[31mBuild step failed.\e[0m" && exit 1)
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './frontend/build'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
- name: Build Succeeded
if: success()
run: echo -e "\e[32mBuild succeeded.\e[0m"
- name: Build Failed
if: failure()
shell: bash
run: |
echo -e "\e[31mBuild failed.\e[0m"
exit 1
在本地,使用
npm start
或 npm run build; npx serve -s build
,这很好用,所以我不显示代码本身。
我想在本地测试,然后使用github actions。像这样运行工作流程:
~/src/personal_website$ act -j build-and-deploy -W .github/workflows/deploy_frontend.yml --secret-file /home/noams/src/personal_website/frontend/.secrets_frontend --env-file /home/noams/src/personal_website/frontend/.env
秘密是
REACT_APP_API_URL=ZZZ
#REACT_APP_API_URL=http://localhost:8080
GITHUB_TOKEN=YYY
#ACTIONS_RUNTIME_TOKEN=YYY
ACTIONS_RUNTIME_TOKEN=dummy [but also fails with the same token as GITHUB]
GITHUB_REPOSITORY=XXX
.env 文件如下:
# frontend
# leave this here for the npm start to work
REACT_APP_API_URL=XXX
ENVIRONMENT="local"
REACT_APP_ENVIRONMENT="local"
# some backend variables below
注意 .secrets 中存在重复的
REACT_APP_API_URL
,因为 npm start
只知道如何读取 .env 而不是 .secrets,我认为这并不重要。 (清理它也很好)。
Github 配置与 AFAIK 无关,因为这是通过 act 在本地运行的。
步骤
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: './frontend/build'
失败
[Deploy Frontend/build-and-deploy] 💬 ::debug::File:/tmp/artifact.tar was found using the provided searchPath
| With the provided path, there will be 1 file uploaded
[Deploy Frontend/build-and-deploy] 💬 ::debug::Root artifact directory is /tmp
| Artifact name is valid!
| Root directory input is valid!
[Deploy Frontend/build-and-deploy] ❗ ::error::Unable to get the ACTIONS_RUNTIME_TOKEN env variable
[Deploy Frontend/build-and-deploy] ❌ Failure - Main Upload artifact
[Deploy Frontend/build-and-deploy] exitcode '1': failure
[Deploy Frontend/build-and-deploy] ⚙ ::set-output:: artifact_id=
[Deploy Frontend/build-and-deploy] ❌ Failure - Main Upload artifact
[Deploy Frontend/build-and-deploy] exitcode '1': failure
[Deploy Frontend/build-and-deploy] ⭐ Run Post Upload artifact
[Deploy Frontend/build-and-deploy] 🐳 docker cp src=/home/noams/.cache/act/actions-upload-pages-artifact@v3/ dst=/var/run/act/actions/actions-upload-pages-artifact@v3/
[Deploy Frontend/build-and-deploy] ✅ Success - Post Upload artifact
[Deploy Frontend/build-and-deploy] 🏁 Job failed
Error: Job 'build-and-deploy' failed
所以这里有两个错误我无法指出:
::error::Unable to get the ACTIONS_RUNTIME_TOKEN env variable
,尽管我尝试喂它而不喂它::debug::Root artifact directory is /tmp | Artifact name is valid! | Root directory input is valid!
,我不知道他们在说什么解决这些问题的任何方向都会有帮助。
不用说,GPT 和 Claude 也帮不上忙。
将根据要求提供任何其他详细信息,我希望我写了所有相关内容。
Az 每个线程@Azeem 链接:
我必须使用额外的
--artifact-server-path /tmp/artifacts
来运行,它解决了这个问题。为什么?谁知道呢。也许github线程。
完整运行命令:
act -j build-and-deploy \
-W .github/workflows/deploy_frontend.yml \
--secret-file /home/noams/src/personal_website/frontend/.secrets_frontend \
--env-file /home/noams/src/personal_website/frontend/.env \
--artifact-server-path /tmp/artifacts