Deploying react app to amazon s3 via github actions - reactjs

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/

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/

Azure deployment of react app fails in deployment phase due to package path or zip deploy

I am new to azure and I made a setup on the azure portal with GitHub and set .yml. the pipeline runs successfully in the build phase but fails in the deployment phase.
here is my workflow file.
push:
branches: ["master"]
workflow_dispatch:
env:
AZURE_WEBAPP_NAME: wep-app-name # set this to your application's name
AZURE_WEBAPP_PACKAGE_PATH: "." # set this to the path to your web app project, defaults to the repository root
NODE_VERSION: "16.15.0" # set this to the node version to use
NODE_OPTIONS: "--max-old-space-size=8192"
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v3
- name: Set up Node.js
uses: actions/setup-node#v3
with:
node-version: ${{ env.NODE_VERSION }}
cache: "npm"
#- name: yarn install, build, and test
# run: |
# node --max_old_space_size=8192
# yarn
#yarn run build
#zip artifact
- name: Zip artifact for deployment
run: zip release.zip ./build/* -r #get files and folder in build folder and
#compress into release.zip with linux zip command
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v3
with:
name: node-app
path: build
deploy:
permissions:
contents: none
runs-on: ubuntu-latest
needs: build
environment:
name: "Development"
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v3
with:
name: node-app
path: .
- name: "Deploy to Azure WebApp"
uses: azure/webapps-deploy#v2
id: deploy-to-webapp
with:
app-name: "app-name"
slot-name: 'Production'
publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_B2318A4382DB625 }}
package: .

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

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

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!

Resources