It's assumed that you have already containerized your React app. If you haven't then read this first
Usually, you should deploy your React app usi...
For further actions, you may consider blocking this person and/or reporting abuse
Great post, thanks for sharing....
I dockerized my react app, and can ONLY run the dockerized image with interactive mode (-it) specified in the docker run. Unfortunately, I don't see a way to do the same to add the "-it" to the docker image in the ECS Fargate's task definition.
Is there a way to aviod to have to run in the interactive mode? or a way to specify an interactive mode in the Fargat task definition?
Appreciate if you can advise...
Hi, thanks for stopping by. Let's take a step back, could u please mention why you need to run your production app in the interactive mode? (it will help me propose a possible solution) - thanks.
Thanks for pointing out "why must I run the container in interactive mode?"... instead of looking at how to run container with -it in AWS, I seems managed to get around the interactive mode requirement by adding ENV CI=true to the dockerfile... i am not sure if that fixed the -it requirement, but i can run it without interactive mode now.
Hi Mubbashir,
If I run without the interactive mode with below cli
docker run --rm --name=my-react-app --network=mynetwork -p 3000:3000 my-react-app-image
I am getting the server stopped at "Starting the development server..." as shown below:
[HPM] Proxy created: /auth/google -> my-node-server:5000
[HPM] Proxy created: /api/* -> my-node-server:5000
ℹ ｢wds｣: Project is running at 172.18.0.2/
ℹ ｢wds｣: webpack output is served from
ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
my dockerfile is simple:
pull official base image
FROM node:12-slim
set working directory
WORKDIR /usr/src/app
install app dependencies
COPY package*.json ./
RUN npm install
RUN npm install react-scripts@3.4.1 -g
add app
COPY . ./
start app
CMD ["npm", "start"]
But if I run it in my node js console using "npm start" i can start my dev without issue...
Thanks,
Ah, so you are trying to use it for development purposes. When we deploy on ECS, we do it for production. For production, you need to use a multistage docker (first build the react app, second copy the built files and serve using Nginx - no nodejs server involved).
For development, you don't need to use ECS. That's something that you will be doing on your local machine, and it's totally fine to use
-itfor it. You may also want to attach volume to your code directory if you are developing via docker :)Can't seem to get this process working anymore. Basically, once I get to the end and I open up the load balancer url in the browser it shows a 503 Error. I believe AWS has changed the "Create a security group" process and you now have to set up the inbound rules. I'm thinking my error could be somewhere at that part of the process. Have you setup a pipeline recently and encountered a similar issue?
Hi! Thank you for your article!
Images after text - "Next: Configure Security Groups" and text - "Next: Configure Routing" are the same. It's not clear what settings you used in step - 3. Configure Security Groups.
Oh, you are right. I will update the images. The image for "Security Group Configuration" is missing.
Whats the benefit of hosting a react app on fargate as compared to S3? React files are built into static files which don't require a run-time. So, why would you put it on fargate?
Both are two different models of deployments. Instead of S3 vs ECS, you probably want to know about the benefits of containerized applications. Once you have the idea of why should we containerize our application then ECS comes into play. And then your question would be something like why should we use ECS instead of beanstalk (or other container services)?
So at this point, you need to understand the benefits of containerization in general.
Could you elaborate your answer a bit more? It would really be helpful if you could point out some of the reasons why we want to containerize a React app, or any other SPA. Thanks in adavance.
Hi, thank you first for your time you spent helping us with this article, it's really helpfull.
I did the first step fine, BUT after finishing the second step, the react app not accessible from the browser using DNS Name as explained in last thing in the step 2.
thanks in advance to anyone can help.
Hi Mubbashir Mustafa, very good post. Why would not split front end of Backend using s3 for static files and ecs for react backend? In that way you can have separate development cycles.