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
Related
I am trying to deploy my React app on a server via PM2. My React app currently has 2 environments: prod and dev. So, in my app folder, I have an environments folder with 2 files: .dev.env and .prod.env. First one is used for calling local APIs, and the second one is for production API URLs. prod.env is shown below:
When I want to start the app, I use the command npm run start:dev or npm run start:prod, depending on which environment I want my app on.
The question here is, when I try to deploy my app via PM2, what command or modification should I do so that I am certain that my app is deployed in production/prod mode?
My current PM2 config file looks like this:
{
apps : [
{
name : "random_app", //name of my app
script : "npm",
interpreter: "none",
args: "run start:dev"
}
]
}
For a production environment you should be serving the built version of the React app (run npm run build and it will output a production-ready version of your app to the build folder).
In order to separate the environment variables, you should use .env.development and .env.production files (the built version will automatically use the .env.production file) - see here for more information.
Then to serve it, you would use pm2 and serve (make sure serve is installed as well npm install -g serve) with a command like pm2 serve <path/to/build/folder> <port> --spa - more info can be found here.
I have a ReactJS project that I have been deploying to GitLab Pages for a while without any issues. Today however I started using .env files to get the app name and app version from the package.json file.
REACT_APP_VERSION=$npm_package_version
REACT_APP_NAME=$npm_package_name
When I deployed the app again, any references to either process.env.REACT_APP_VERSION or process.env.REACT_APP_NAME shows undefined although it works on my dev machine. I looked at the artifacts and it does have the .env file under the public/ directory.
Here's my .gitlab-ci.yml file that I use to deploy the app to GitLab Pages:
stages:
- build
- deploy
build:
image: node:16.15-buster-slim
stage: build
script:
- yarn install
- yarn build
- cp .env.example build/.env
artifacts:
paths:
- build/
pages:
image: alpine:latest
stage: deploy
variables:
GIT_STRATEGY: none # Do not clone git repo
NODE_ENV: production
PUBLIC_URL: https://somedomain.com
script:
# Rename the CRA `build` folder to `public`
- mv build public
- cp public/index.html public/404.html
artifacts:
paths:
- public
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
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