Can't connect to my backend when running Cypress on Github Actions - reactjs

I have a React app that I'm testing with Cypress. I then have a separated backend running on Graphql-yoga. Everything works fine locally and testing with Cypress also works flawlessly.
But now I'm trying to use Github Actions for the first time and I have created a job to get my backend, start it, get my frontend and run Cypress. I have a console log with 'Server running on port ...' on my server, and I'm seeing it when the job runs, but still Cypress isn't connecting to my backend and I have no clue why. All Cypress tests but one are failing. The only test that's not failing is one I've created just to make sure the backend isn't sending any response. I don't see any errors/warning related to it.
Here's my workflow file:
name: CI
# Controls when the action will run.
on:
# Triggers the workflow on push or pull request events but only for the master branch
push:
branches: [master]
pull_request:
branches: [master]
# Allows you to run this workflow manually from the Actions tab
workflow_dispatch:
jobs:
cypress:
runs-on: ubuntu-latest
steps:
- name: Checkout backend repo
uses: actions/checkout#v2
with:
repository: ****/****
token: ${{ secrets.REPO_TOKEN }}
path: backend
- name: Set up Nodejs ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- name: Install backend dependencies
working-directory: ./backend
run: npm install
- name: Run backend
working-directory: ./backend
run: node server.js &
env:
APP_SECRET: ${{ secrets.BE_APP_SECRET }}
FIREBASE_SERVER_KEY: ${{ secrets.BE_FIREBASE_SERVER_KEY }}
CLOUDINARY_SECRET: ${{ secrets.BE_CLOUDINARY_SECRET }}
CLOUDINARY_KEY: ${{ secrets.BE_CLOUDINARY_KEY }}
NODE_ENV: ${{ secrets.BE_NODE_ENV }}
DATABASE_URL: ${{ secrets.BE_DATABASE_URL }}
- name: Checkout frontend repository
uses: actions/checkout#v2
- name: Install dependencies
run: npm install
- name: Run Cypress tests
uses: cypress-io/github-action#v2
with:
start: npm start
wait-on: 'http://localhost:3000'
config: baseUrl=http://localhost:3000
env:
REACT_APP_FIREBASE_API_KEY: ${{ secrets.REACT_APP_FIREBASE_API_KEY }}
REACT_APP_NODE_ENV: test
Any ideas what might be the problem?
Thanks in advance!

Related

Deployment nextjs project on GitHub

My next.js project is hosted on GitHub on GH pages. It is auto-deployed with .github/workflow/site-deploy.yml
This is the code:
name: Node.js CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- name: Installing my packages
run: npm ci
- name: Build my App
run: npm run build
env:
NEXT_PUBLIC_BASE_PATH: /
- run: touch ./out/.nojekyll
- name: Deploy
uses: JamesIves/github-pages-deploy-action#3.5.9
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
BRANCH: gh-pages
FOLDER: out
Everything works fine. The website is deployed and live, but every time I do push and this code starts working I can see two errors on GitHub > action > Node CLI > deploy
Error: Unable to process command '::set-env name=DEPLOYMENT_STATUS::success' successfully.
Error: The `set-env` command is disabled. Please upgrade to using Environment Files or opt into unsecure command execution by setting the `ACTIONS_ALLOW_UNSECURE_COMMANDS` environment variable to `true`. For more information see: https://github.blog/changelog/2020-10-01-github-actions-deprecating-set-env-and-add-path-commands/

github action with docker makes error "exporting to image 403 forbidden error"

name: CI/CD Docker
on:
push:
branches: [main]
env:
DOCKER_IMAGE: ghcr.io/${{ github.actor }}/github-actions-auto
VERSION: ${{ github.sha }}
NAME: go_cicd
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
# github repository에서 checkout
- uses: actions/checkout#v2
- name: Set up docker buildx
id: buildx
uses: docker/setup-buildx-action#v1
- name: Cache docker layers
uses: actions/cache#v2
with:
path: /tmp/.buildx-cache
key: ${{ runner.os }}-buildx-${{ env.VERSION }}
restore-keys: |
${{ runner.os }}-buildx-
- name: Login to ghcr
uses: docker/login-action#v1
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GHCR_TOKEN }}
- name: Build and push
id: docker_build
uses: docker/build-push-action#v2
with:
builder: ${{ steps.buildx.outputs.name }}
push: true
tags: ${{ env.DOCKER_IMAGE }}:latest
deploy:
needs: build
name: Deploy
runs-on: [self-hosted, label-go]
steps:
- name: Login to ghcr
uses: docker/login-action#v1
with:
registry: ghcr.io
username: ${{ github.actor }}
password: ${{ secrets.GHCR_TOKEN }}
- name: Docker run
run: |
docker stop ${{ env.NAME }} && docker rm ${{ env.NAME }} && docker rmi ${{ env.DOCKER_IMAGE }}:latest
docker run -d -p 8080:80 --name go_cicd --restart always ${{ env.DOCKER_IMAGE }}:latest
This is our Dockerfile. If I push code to main branch, this CI/CD pipeline works well. But my partner push code to main branch, it makes 403 forbidden error. I don't know how to solve this problem... How to solve this error?
This is error message in github actions.
Adding the below permissions to the build job fixed this issue for me. I am not sure it will work for anyone, but this question was the first I found when looking for a solution. Hopefully it can help future people:
jobs:
build:
runs-on: ubuntu-latest
permissions:
packages: write
This was taken from this answer: https://stackoverflow.com/a/71438011/14387852
For anyone stumbling upon this in future, here's what you need to make the pre-built github actions to push docker image to azure web app work,
jobs:
build-and-push-image:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
You need to add the content given below the permissions part.
Reference: https://docs.github.com/en/packages/managing-github-packages-using-github-actions-workflows/publishing-and-installing-a-package-with-github-actions#publishing-a-package-using-an-action
To make this work for me, I had to allow the repository to write to the package. You would do that in this link:
https://github.com/users/${username}/packages/container/#{repo}/settings
And there should be a section there "Manage Actions access", where you can add the repository
Follow these steps to fix this issue.
https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/enabling-features-for-your-repository/managing-github-actions-settings-for-a-repository#configuring-the-default-github_token-permissions
In my case, it was fixed by adding a driver and install properties.
- name: Set up Docker Buildx
uses: docker/setup-buildx-action#v1
with:
driver: docker
install: true

dotenv-webpack enviornment variables not working on Github actions

I'm using dotenv-webpack to set up the enviornment varibles from webpack. And push my code build to S3 then. I set up .env file on my local with APP_BASE = http://localhost:3000 inside .env.
I have created the github action workflow.yml:
name: React CI
on:
push:
branches:
- "main"
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [15.x]
steps:
- uses: actions/checkout#v1
- run: npm install
- run: npm run build
- uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: "ap-southeast-2"
SOURCE_DIR: "dist"
APP_BASE: ${{ secrets.APP_BASE }}
On my github actions secrets, I have added the secrets:
on webpack settings, I have set systemvars: true:
plugins: [
new Dotenv({
systemvars: true,
}),
It's working on my localhost.
I didn't commit .env file to my repository, and when I push code to github, github console output: Failed to load ./.env..
When I check the compiled file, it shows var e="MISSING_ENV_VAR".APP_BASE;. That means github action didn't catch the APP_BASE on the secrets.
How can I fix this issue?
One possibility is comitting .env to your repo with values suitable for local dev and containing no real secrets. Then put all your secrets in GitHub and when CI runs the local dev values will be overwritten by the ones in GitHub secrets via the systemvars setting.
I found the error, I should move the env varible to the higher level as the current one I put is for task on S3, not for build.
name: React CI
on:
push:
branches:
- "main"
env:
APP_BASE: ${{ secrets.APP_BASE }}
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [15.x]
steps:
- uses: actions/checkout#v1
- run: npm install
- run: npm run build
- uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: "ap-southeast-2"
SOURCE_DIR: "dist"

Github actions issues with main.yaml file to create .env file during deployment

I am trying to deploy my project using Google App engine using Github actions. I created main.yaml file and added a job to create .env file during deployment. But it is showing the built successful but the .env is not added to the code. I am using actions Create .env file.
This is my main.yaml file-
name: CI
on:
push:
branches: [ deploy ]
pull_request:
branches: [ deploy ]
jobs:
create-envfile:
runs-on: ubuntu-18.04
steps:
- name: Make envfile
uses: SpicyPizza/create-envfile#v1
with:
envkey_DEBUG: False
envkey_DATABASE_URL: ${{ secrets.DATABASE_URL }}
envkey_USER: ${{ secrets.USER }}
envkey_PASSWORD: ${{ secrets.PASSWORD }}
envkey_DATABASE_NAME: ${{ secrets.DATABASE_NAME }}
file_name: .env
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Initialize Google Cloud SDK
uses: zxyle/publish-gae-action#master
with:
service_account_email: ${{ secrets.GCP_SA_EMAIL }}
service_account_key: ${{ secrets.GCP_SA_KEY }}
project_id: ${{ secrets.PROJECT_ID }}
# An optional variables parameter can be used
gae_variables: ${{ secrets.GAE_VARIABLES }}
- name: Publish app to Google App Engine
run: |
# This client-secret.json is converted by GCP_SA_KEY.
gcloud auth activate-service-account ${{ secrets.GCP_SA_EMAIL }} --key-file=client-secret.json
gcloud config set project ${{ secrets.PROJECT_ID }}
gcloud -q app deploy app.yaml --promote
This is the output of the https://github.com/khannakshat7/Elektra/actions/runs/888591866
You run shows
Unexpected input(s) 'envkey_DEBUG', 'envkey_DATABASE_URL', 'envkey_USER', 'envkey_PASSWORD', 'envkey_DATABASE_NAME',
valid inputs are ['entryPoint', 'args', 'file_name']
As explained in SpicyPizza/create-envfile issue 10:
because Github is expecting all the potential input variables to be defined by
the Action's definition.
You could ignore that warning except in your case, as commented here, it does not seem to work.
Check issue 12 for a possible .env right issue.
Here is an example which works (from issue 14):
- name: Make envfile
uses: SpicyPizza/create-envfile#v1
with:
envkey_DEBUG: false
envkey_REACT_APP_FIREBASE_API_TOKEN: ${{ secrets.FIREBASE_API_TOKEN }}
file_name: .env

Deploying react app to amazon s3 via github actions

So i have a Ionic React app which i would want that every time i push to the master branch it automatically uploads the files to amazons s3 bucket as well. I have come pretty far and my only problem is with the yml file in which i have to specifiy the directory to be uploaded. This is how it looks now:
name: Deploy
on:
push:
branches: [ master ]
workflow_dispatch:
jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- uses: actions/setup-node#v1
with:
node-version: 12
- run: npm install -g npm
- run: npm ci
- run: npm build
- uses: aws-actions/configure-aws-credentials#v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: eu-north-1
- run: aws s3 sync <What to insert here?> s3://example-bucket
Now i have tried with putting jsut an . there but it uploaded for 20 mins without reaching an end and it was not with a strcutured folders in the s3 buckets but every file for itself. Any solutions? I feel like it is a easy task but im no backend developer
I have the index file here: payeat-s3/public/index.html
I have used this YAML configuration to deploy my react site to S3 using Github Actions:
on:
push:
branches:
- develop
name: Build and Deploy Site to S3
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#master
- name: Setup Node
uses: actions/setup-node#v2
with:
node-version: '12.x'
- name: Build App
run: |
yarn && yarn build && ls *
env:
CI: ""
- name: Copy to S3
uses: jakejarvis/s3-sync-action#master
with:
args: --acl public-read --follow-symlinks --delete
env:
AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
AWS_REGION: ${{ secrets.AWS_REGION }}
SOURCE_DIR: ${{ secrets.SOURCE_DIR }}
I have added more details in this blog - https://blog.coderise.io/deploy-react-app-aws-s3-using-github-actions/

Resources