I am testing deployment of an app on AWS amplify. These are the steps I followed:
created a sample create-react-app (called deploy_test app here),
Pushed the code to a GitHub repo
AWS Amplify console > Deploy app > linked GitHub repo > used default config (as shown below)
version: 1
frontend:
phases:
preBuild:
commands:
- yarn install
build:
commands:
- yarn run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
The deployment works beautifully, even when I push new changes. The issue is that I can see the entire source code in the Chrome Dev Tools (as shown below). Any tips on how I can resolve this?
by default, create-react-app will generate full sourcemaps:
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
https://github.com/facebook/create-react-app#whats-included
you can set GENERATE_SOURCEMAP=false before the build script:
build:
commands:
- GENERATE_SOURCEMAP=false yarn run build
you can see it defined in the source code of create-react-app webpack config:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L43-L46
Related
I have recently built my vite proyect with amplify. The project manages to build well, but regarding redirects, it crashes and stops, throwing me the following error:
My build profile is:
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build --prod
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: /dist
files:
- '**/*'
cache:
paths:
- node_modules/**/*
And the proyect structre the one vite provides:
dist
|__assets
|
|__index.html
I am in fact adding the custom redirect for SPA's </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> yet on redirects (made with react-router-dom, my pagre crashes)
I found a workaround for this!
Suprisingly by adding this in my defineConfig (on my vite.config.js) file it worked:
base: '<your url link>',
I documented this process in the following article: https://dev.to/muvinai/building-and-distributing-vitejs-projects-with-amplify-hdd
I'm trying to deploy a react NextJs app to GAE with automated build / deployment jobs using Gitlab CI.
The problem is I don't really know what to export as "artifcats" from the build stage to deploy stage.
For the the build I use a specific node image to run my yarn commands : "node:14.16.0-alpine"
For the deploy I use the google cloud sdk image : "google/cloud-sdk:alpine"
Here is my .gitlab-ci.yaml :
image: google/cloud-sdk:alpine
stages:
- build
- deploy
build_develop:
image: node:14.16.0-alpine
stage: build
environment: Development
only:
- develop
script:
- same scripts here ...
- yarn install
- yarn build
artifacts:
paths:
- ./*
deploy_develop:
stage: deploy
environment: Development
only:
- develop
script:
- echo $SERVICE_ACCOUNT > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project $PROJECT_ID app deploy app.yaml
As you can see I pass all files from the build stage to deploy stage with the ./* path (I got an error before in the deploy which didn't find the files from the previous job so I added that artifcats).
Now the deploy job gets all files but there are some warning :
./*: found 76932 matching files and directories
WARNING: Part of .git directory is on the list of files to archive
WARNING: This may introduce unexpected problems
So can I optimize this to only pass artifcats needed to deploy the NextJS app ?
Thanks
My Sapper app deploys Ok if I build it first and then deploy it from my local machine with gcloud app deploy.
My app.yaml just has: runtime:nodejs10 in it to deploy to the standard environment.
Now I can't achieve the same when I try to use Gitlab CI to deploy on git push.
In my .gitlab-ci.yml file I have 2 jobs: 1 to npm install and to run the build command and a second one to deploy to gcloud.
The 2 jobs complete but when I chack the version it has a 500 error and the logs say: Error: Cannot find module '/srv/__sapper__/build'.
So this has me going round in circles. I've tried moving svelte and sapper from dev deps to dependencies in package.json but it has not helped, I've looked at adding handlers in my app.yaml but am confused how, I've seen an issue on sapper github mentioning something related to svelte makefile and an issue with it needing to be built for the docker image to use it but no clear solution is proposed...
My .gitlab-ci.yml looks like this:
production-build:
stage: build-for-prod
image: node:10
script:
- npm install
- npm run build
only:
- master
prod-deploy:
stage: production
only:
- master
needs: ["production-build"]
image: google/cloud-sdk:alpine
environment: PROD
script:
- echo $SERVICE_ACCOUNT_KEY > /tmp/$CI_PIPELINE_ID.json
- gcloud auth activate-service-account --key-file /tmp/$CI_PIPELINE_ID.json
- gcloud --quiet --project sapper1-test app deploy app.yaml --verbosity debug --no-promote
after_script:
- rm /tmp/$CI_PIPELINE_ID.json
Correct me if i'm wrong, but to me this looks like you've misconfigured it. The jobs are running in separate containers and deploy doesn't have access to build results, that's why it is missing dependencies.
Artifacts might help to pass the built libraries around. But i would just build a custom image containing both Nodejs and Cloud SDK and combined two jobs on top of this image.
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
Im trying to deploy a project to S3, but I'm having trouble with the grunt build step. Locally on my mac (10.9, node 0.10) the grunt build step works perfectly. If I manually deploy to s3 using the command line client everything works.
But when I use Travis, when my scripts get concatenated, it seems to leave out my services and directives. In the Travis log it looks like they should be added though (ex. line 2054).
This is my .travis.yml file:
language: node_js
node_js:
- '0.10'
before_script:
- gem install compass
- npm install
- npm install bower
- bower install
- npm install grunt-cli
- grunt build
deploy:
provider: s3
access_key_id: AKIAISJMRUQ4YJVE4AYA
secret_access_key:
secure: E1SMwWvV4J2OWS+kQcu/DnCaVR+Jf1wigk+guvlAS9YcqQuaVJNMDiMWJdoHO6tnv3PIY2JtVgxMA4IRpW9F0RDHeJh2k6C5D+szw0x+XRnfbTx57YLw2c1b+IwXKp5Rl7hAzVsvaUZC4NuU6vbwxS+SOKIsICfq6r2VmpS0zoY=
bucket: lastfm-angular
on:
repo: keymholio/lastfm-angular
My repo is here: https://github.com/keymholio/lastfm-angular
My travis build is here: https://travis-ci.org/keymholio/lastfm-angular/builds/22743947
Deployed site: http://lastfm-angular.s3-website-us-east-1.amazonaws.com/
Fixed my problem by commenting out the concat step in the Gruntfile.
https://github.com/keymholio/lastfm-angular/commit/b4e70a4f2511593c3b1dc62cbd105e182bb7d135