How to deploy React app with docker and serve -s build

Viewed 2237

So far I have build the image and deployed it to AWS EC2. But I want to use

serve -s build

to serve the app in production mode. I did it locally and apparently everything seems to be fine..I get this..

┌──────────────────────────────────────────────────┐ │ │ │ Serving! │ │ │ │ - Local: http://localhost:5000 │ │ - On Your Network: http://192.168.1.91:5000 │ │ │ │ Copied local address to clipboard! │ │ │ └──────────────────────────────────────────────────┘

And the page enters..but the when I try to make a request to the api I get 404.

I wanted to know how does react build works and what do I need to do to put it in production mode. And also, what is the dist folder for?

This is my Dockerfile:

FROM node

#Create app directory
WORKDIR /app

# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./

#Install dependencies
RUN npm install
RUN npm install react-scripts@3.4.1 -g --silent


#Copy app's source code inside the Docker image
COPY . .

#Expose the app's port
EXPOSE 3000

#Run the app when the container is ran
CMD ["npm", "start""]

Thanks!

1 Answers

This is my Dockerfile I use when I run it with serve -s build

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# Copies package.json and package-lock.json to Docker environment
COPY package*.json ./

# Installs all node packages
RUN npm install

# Copies everything over to Docker environment
COPY . .

# Build for production.
RUN npm run build --production

# Install `serve` to run the application.
RUN npm install -g serve

# Uses port which is used by the actual application
EXPOSE 5000

# Run application
#CMD [ "npm", "start" ]
CMD serve -s build

I just switch between npm start (debug) and serve (for production).

Related