I am facing the below issue,
I have a docker container ( React APP ) running with volume attached to it. So that my code changes are reflected automatically and its working fine.
The docker compose file commands is as below
volumes:
- ".:/app"
- "./src:/web/src"
- "/app/node_modules"
ports:
- "3000:3000"
- "35729:35729"
Now what I have done is, I have created a clone of the same repo and pulled to my local machine into a different folder. Now I am trying to run the container with
docker-compose up -d --build
It spins up the container and replace the existing one, but throws a error while app is running
service-worker.js:26 Uncaught (in promise) TypeError: Failed
to fetch
at service-worker.js:26:16 (anonymous) # service-worker.js:26
log.js:21 [HMR] Waiting for update signal from WDS... main.chunk.js:10
Uncaught Error: Module build failed (from
./node_modules/sass-loader/dist/cjs.js): SassError: Can't find
stylesheet to import. ╷ 1 │ #import "./themes.scss"; │
^^^^^^^^^^^^^^^
But when I am commenting out the following line in volumes section in Docker-compose file and runs the docker-compose up command, there is no error and apps loads fine
- "./src:/web/src"
I tried removing the volumes after deleting the container and running it again. But when the above line is there in docker-compose it does not work.
Any idea how to resolve it and have volume attached ?
try deleting the directory or files where the volumes were stored and
run docker compose up --build -d not docker compose up -d --build
Related
I'm trying to get React to change content of the site when it's file is being saved.
I'm using VS code which doesn't have safe write. I'm using docker-compose on Windows via Docker Desktop.
Dockerfile:
FROM node:17-alpine
WORKDIR /front
ARG FRONT_CMD
ARG API_HOSTNAME
ENV REACT_APP_API_HOSTNAME=$API_HOSTNAME
COPY . .
RUN npm i #emotion/react #emotion/styled
CMD $FRONT_CMD
relevant part of docker-compose.yml:
frontend:
volumes:
- ./frontend/src:/front/src
- /front/node_modules
build:
context: ./frontend
dockerfile: Dockerfile
args:
- FRONT_CMD=${FRONT_CMD}
- API_HOSTNAME=${API_HOSTNAME}
env_file:
- .env.dev
networks:
- internal
environment:
- CHOKIDAR_USEPOLLING=true
- FAST_REFRESH=false
- NODE_ENV=development
Everything is running behind traefik. CHOKIDAR_USEPOLLING and FAST_REFRESH seem to make no difference, I start with ' docker-compose --env-file ..env.dev up' - within the file FRONT_CMD="npm start" which behaves just fine. Env.dev should be clear indication of dev build (and is, works the same without the addition) to React, but I added NODE_ENV just be safe. I tried adding all of them into build envs just be super sure, but nothing changes. React files lay in 'frontend' folder, which is in the same location as docker-compose.yml.
Every time React says it compiled successfully and warns me that it's a development build.
Only suspicion I have left is that there's some issue with updating files with Windows locally while docker uses Linux, but I have no idea where to go from there even if that's the case.
Shortest way I found was to start from the other side, that is attach editor to container instead of updating container based on changes in system files. I followed the guide here: https://code.visualstudio.com/docs/remote/attach-container
Each time I am trying to build and deploy my React Project on AWS Elastic Beanstalk using Docker, I am getting this error:
Stderr:fatal error: runtime: out of memory
The project is the basic react project and nothing more, serving it via nginx. What might be the reason of this error? And how do I resolve it. Please note, I have emptied my S3 bucket and have restarted the appServer too, to try and resolve any unnecessary memory or cache use. And I am able to successfully build and run this file locally. The logs are as follows:
Step 1/9 : FROM node:alpine as builder
---> eb56d56623e5
Step 2/9 : WORKDIR '/app'
---> Using cache
---> 41d7415dae07
Step 3/9 : COPY package.json .
---> Using cache
---> 95877ba9972c
Step 4/9 : RUN npm install
---> Using cache
---> c366758de80f
Step 5/9 : COPY . .
---> 5697eace7031
Step 6/9 : RUN npm run build
---> Running in 52cc1a3e6ac0
> react-project-frontend#0.1.0 build
> react-scripts --openssl-legacy-provider build
Creating an optimized production build...
2022/03/03 13:14:45.346275 [WARN] failed to execute command: docker build -t aws_beanstalk/staging-app /var/app/staging/, retrying...
2022/03/03 13:14:45.425369 [INFO] Running command /bin/sh -c docker build -t aws_beanstalk/staging-app /var/app/staging/
2022/03/03 13:14:47.001398 [ERROR] An error occurred during execution of command [app-deploy] - [Docker Specific Build Application]. Stop running the command. Error: failed to build docker image: Command /bin/sh -c docker build -t aws_beanstalk/staging-app /var/app/staging/ failed with error exit status 2. Stderr:fatal error: runtime: out of memory
You docker image does not enough memory allocated:
In the ElasticBeanstalk application environment Dockerrun.aws.json, you can increase the memory allocation ("memory": 80 to e.g. "memory": 100):
"containerDefinitions": [
{
"name": "request_repeater",
"image": "my/image",
"essential": true,
"memory": 80, <- change this
Also, maybe you need to change the instance type. For example the t2.nano has a max memory of 0.5 GB
You can do this in Modify capacity settings when you are creating your application, or edit in Configuration > Capacity setting on the current env configuration.
I have a react website that I host on AWS. I have created code pipeline in AWS that connects to my github, which automatically builds the projects using codeBuild and deploys it to S3.
I'm trying to add react-snap to the project. It works well locally but when I try to build it in codebuild I get this error
Error: Failed to launch chrome!
/codebuild/output/src159566889/src/node_modules/puppeteer/.local-chromium/linux-686378/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory
TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
at onClose (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:348:14)
at Interface.<anonymous> (/codebuild/output/src159566889/src/node_modules/puppeteer/lib/Launcher.js:337:50)
at Interface.emit (events.js:326:22)
at Interface.close (readline.js:416:8)
at Socket.onend (readline.js:194:10)
at Socket.emit (events.js:326:22)
at endReadableNT (_stream_readable.js:1241:12)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
error Command failed with exit code 1.
I have tried to google it but I didn't find anything specific to codebuild and react-snap. I have found similar questions in regards to running chrome on codebuild but they related to different environments like angular and so I wasn't able to copy their solutions.
This is what my current buildspec.yaml file looks like
version: 0.2
env:
variables:
S3_BUCKET: "xyz"
STAGE: "beta"
phases:
install:
commands:
- yarn install
build:
commands:
- echo "Building for $STAGE"
- yarn build
- sam package --template-file cloudformation/Root.json --s3-bucket ${S3_BUCKET} --s3-prefix WebsiteCF/${CODEBUILD_RESOLVED_SOURCE_VERSION} --output-template-file build/packaged-template.yaml
artifacts:
files:
- '**/*'
base-directory: 'build'
Based on the instruction on the link provided by the error, I tried adding this but it didn't work
install:
commands:
- PYTHON=python2 amazon-linux-extras install epel -y
- yum install -y chromium
- yarn install
I managed to get it working using these steps:
Make sure your AWS code builder is using aws/codebuild/standard:5.0
Go t AWS code builder -> Edit -> Environment -> Override image
Create a addArgs.sh file to your project with this content
# modifies react-snap defaultOptions to add the --no-sandbox and --disable-setuid-sandbox flags so that puppeteer/chromium can run in the codebuild standard image
sed -i "s/puppeteerArgs: \[\],/puppeteerArgs: \[\"--no-sandbox\", \"--disable-setuid-sandbox\"\],/" ./node_modules/react-snap/index.js
echo changed arguments in react-snap
To your buildspec.yml file, add these lines to the install stage
# Install chrome headless
- apt-get -y update
- apt-get --assume-yes install chromium-browser
- sh ./addArgs.sh # run custom script to change options on react-snap to make it work
I found the answer from here - https://github.com/stereobooster/react-snap/issues/122
I am facing an issue while building my React project using GitHub as a repository, Travis as CI with AWS ElasticBeanStalk as a service to run my app using Docker. I am able to run my test suite but after that, it is not deploying my app on AWS and also not getting any error in Travis console except below:
Below is my Travis .yml file configuration:
language: generic
services:
- docker
before_install:
- docker build -t heet1996/my-profile -f Dockerfile.dev .
script:
- docker run heet1996/my-profile npm run test -- --coverage
deploy:
provider: elasticbeanstalk
region: "us-east-1"
app: "My-profile"
env: "MyProfile-env"
bucket_name: "elasticbeanstalk-us-east-1-413920612934"
bucket_path: "My-profile"
on:
branch: master
access_key_id: $AWS_ACCESS_KEY
secret_access_key: "$AWS_SECRET_KEY"
Let me know if you need more information
A couple things you could try:
Your script command needs to set the environment var CI=true
So
script:
- docker run heet1996/my-profile npm run test -- --coverage
Becomes
script:
- docker run -e CI=true heet1996/my-profile npm run test -- --coverage
Also AWS needs the access variables to be named differently.
Change
access_key_id: $AWS_ACCESS_KEY
secret_access_key: "$AWS_SECRET_KEY"
To
access_key_id: "$AWS_ACCESS_KEY_ID"
secret_access_key: "$AWS_SECRET_ACCESS_KEY"
Using the option --coverage, your test will hang, waiting for input. Hence the message: "...no output has been received in the last 10m0s...".
At a certain point, --coverage was probably able to stop tests (as some used for that purpose), but I guess it was not meant for that and subsequent versions of docker removed that behavior.
Your test must conclude and the conclusion be a success for the deployment by Travis to begin.
Use instead the option --watchAll=false. So you should have:
...
script:
- docker run heet1996/my-profile npm run test -- --watchAll=false
...
That would take care of the obvious issue of your test never concluding (that could be the only issue). Afterward, make sure that your tests are successful. Then, you can worry about other issues such as authentication on AWS, etc...
Following the instruction in https://www.dartlang.org/server/google-cloud-platform/app-engine/run.html
doesn't work anymore.
During the docker build phase it can't find pubspec.yaml ( Using regular expression with wildcard * ).
I'm using boot2docker and docker 1.5 and the google/dart-runtime image.
Any solution to solve this problem in the deploy of a Dart application in Google Cloud?
INFO 2015-03-08 14:41:12,215 containers.py:280] Step onbuild-0 : ADD pubspec.* /app/
ERROR 2015-03-08 14:41:12,244 containers.py:283] pubspec.*: no such file or directory
INFO 2015-03-08 14:41:12,244 containers.py:292] --------------------------------------------------------
ERROR 2015-03-08 14:41:12,244 instance.py:280] Docker build aborted: pubspec.*: no such file or directory
Updating docker client to latest version done the work:
boot2docker stop
boot2docker download
boot2docker start