im trying to deploy mi first web page with React on Azure Web App using CI/CD (Azure pipelines).
The React web page is simply, only use react material and react-router-dom. I have 2 pages, 404 not found and home page. On npm start the app shows in my local my 404 page (this is correct):
But in my deployed azure web app i have this (pass over 3 minutes charging)(sometimes is 503 and sometimes is a error page):
I have my git repo in github (i dont know if is a problem the use of container folder by the react app(react-portfolio)):
My yaml file for the CI/CD is:
trigger:
- main
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool#0
inputs:
versionSpec: '18.x'
displayName: 'Install Node.js'
- script: |
npm install
npm run build
displayName: 'npm install and build'
workingDirectory: '$(Build.SourcesDirectory)/react-portfolio'
- task: ArchiveFiles#2
inputs:
rootFolderOrFile: '$(Build.BinariesDirectory)'
includeRootFolder: true
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts#1
inputs:
PathtoPublish: '$(Build.ArtifactStagingDirectory)'
ArtifactName: 'drop'
publishLocation: 'Container'
I have a canalization to deploy in Azure Web App (F1 plan, linux):
In my task config i have:
Someone knows which is the problem?
Related
I'm trying to deploy my application on vercel through a GitHub workflow that runs whenever the code is pushed onto the remote repository. The workflow is successfully running, but when I visit the deployed link, an empty white page is shown. On inspecting the network tabs, I could see that the request to the URL is returning a 304 status code. I'm quite clueless why this is happening. Below is the folder structure of my project.
Below is my workflow file
name: Preview Deployment
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
push:
branches-ignore:
- release
jobs:
Deploy-Preview:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Install Vercel CLI
run: npm install --global vercel#latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
During the build step, I could also notice the following log along with some other warnings:
Failed to load ./.env.
Despite the warnings(mostly related to the build file size being over the recommended size) and the above log, the build is successful. How do I fix this 304 issue? TIA
Further, to verify things, I also built the application locally and tried running it, and it worked as expected.
I'm trying to deploy my Vite react app to azure as an app service, but after deploy I always get the default screen (see picture). I tried deploying manually from VS code, but also creating the following yaml file in GitHub actions. The pipeline ran successfully and I still got this problem. I have my react-app in ./LOL_Contest/frontend, that's why I use that in the pipeline. What is the solution?
name: Build and deploy Node.js app to Azure Web App - lolcontest-fe
on:
push:
branches:
- master
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Set up Node.js version
uses: actions/setup-node#v1
with:
node-version: '18.x'
- name: npm install, build, and test
run: |
npm install
npm run build --if-present
npm run test --if-present
working-directory: ./LOL_Contest/frontend
- name: Upload artifact for deployment job
uses: actions/upload-artifact#v2
with:
name: node-app
path: .
deploy:
runs-on: ubuntu-latest
needs: build
environment:
name: 'Production'
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
steps:
- name: Download artifact from build job
uses: actions/download-artifact#v2
with:
name: node-app
- name: 'Deploy to Azure Web App'
id: deploy-to-webapp
uses: azure/webapps-deploy#v2
with:
app-name: 'lolcontest-fe'
slot-name: 'Production'
publish-profile: ${{ ... }}
package: ./LOL_Contest/frontend
I can not share the repository, but I have the following folder structure:
- DataAccess
- LOL_Contest
-- frontend
I want to deploy the contents of the folder "frontend"
I have a React app that builds correctly locally with yarn build. I have the following job in my config for Github Actions to deploy the app to S3:
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout#v1
- name: Configure AWS Credentials
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: us-east-2
- name: Install dependencies
run: yarn install
- name: Build
run: yarn build
- name: Deploy static site to S3 bucket
run: aws s3 sync build/ s3://my-s3-bucket --delete
The Build phase is failing with this error:
Module not found: Error: Can't resolve './components/Layout' in '/home/runner/work/storefront-app/storefront-app/src'
This module does exist under the src/components/ directory, so I'm not sure why it can't be found. I'm exporting it with export default Layout;
So I found that the issue was with filenames and Git.
Locally, all my files were named correctly: Nav.js, Layout.js, etc. On Github, they were downcased: layout.js. Git never picked up the change to the filename, and so the build on GH could not find ./components/Layout. Deleting the files and re-committing them solved the problem.
I'm following this tutorial on setting up CI/CD with github actions for a react app. I want the action to build and deploy my react app to my firebase project for hosting. I'm fairly sure I'm followed the directions, but when I trigger my action with a push, I get this error:
> Run actions/download-artifact#v2
> with:
> name: build
> path: build Starting download for build Error: Unable to find any artifacts for the associated workflow
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Firebase CI
on: push
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/f
steps:
- uses: actions/checkout#v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v1
with:
node-version: ${{ matrix.node-version }}
- run: npm ci
- name: Archive Build
uses: actions/upload-artifact#v2
with:
name: build
path: build
deploy:
name: Deploy
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout#v2
- name: Download Build
uses: actions/download-artifact#v2
with:
name: build
path: build
- name: Deploy to Firebase
uses: w9jds/firebase-action#master
with:
args: deploy --only hosting
env:
FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
I can install, build, and deploy manually from my console just fine. I thought this error might have something to do with my build directory's location, but its in the standard place. Any thoughts on what this might be?
Link to the full repo here
Additional Screenshots:
Seems like removing /build from my .gitignore solved the problem. I'm not %100 sure why though, as none of the examples of similar actions I have seen include their build folders.
My project includes cube.js backend and react frontend. I was able to set up CICD using aws amplify for the front end but I am unsure if I can deploy cube.js on aws amplify.
In the local environment I first run 'npm run dev' to run the backend which starts the service on localhost:4000 and I start the react project with 'npm start' and it runs on localhost:3000. I would like to build and deploy both backend and frontend using aws amplify
My project is set up similar to this example
https://github.com/cube-js/cube.js/tree/master/examples/react-dashboard
In aws amplify, I have the build settings for my frontend as below
version: 0.1
frontend:
phases:
preBuild:
commands:
- cd dashboard
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: dashboard/build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
How do I include my backend cube.js project in this?
You can use Cube.js Serverless template to deploy backend as a set of lambdas: https://cube.dev/docs/deployment#serverless. This way you can include serverless deploy -v command as part of your Amplify build cycle like:
backend:
phases:
preBuild:
commands:
- serverless deploy -v