Reputation: 169
I tried several tutorials and none of them worked in my case, the react segment of dockerfile works fine by itself
Dockerfile
FROM node:14.15.1-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json package-lock.json /app/
RUN npm install --silent && npm install [email protected] -g --silent
COPY . /app
RUN npm run build
FROM nginx:1.20.1-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
nginx.conf
# auto detects a good number of processes to run
worker_processes auto;
#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
worker_connections 8000;
multi_accept on;
}
http {
log_format compression '$remote_addr - $remote_user [$time_local] '
'"$request" $status $upstream_addr '
'"$http_referer" "$http_user_agent"';
server {
listen 80;
# save logs here
access_log /var/log/nginx/access.log compression;
# where the root here
root /usr/share/nginx/html;
index index.html index.htm;
location / {
try_files $uri $uri/ /index.html;
}
# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
# Javascript and CSS files
location ~* \.(?:css|js)$ {
try_files $uri =404;
expires 1y;
access_log off;
add_header Cache-Control "public";
}
# Any route containing a file extension (e.g. /devicesfile.js)
location ~ ^.+\..+$ {
try_files $uri =404;
}
location /api/ {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
I also tried simpler Nginx conf files but they all end in the same result, and this came from this tutorial: https://www.yld.io/blog/deploy-create-react-app-with-docker-and-ngnix/
I run "docker build --rm -t front:prod ." Followed by "docker run -p 80:80 olimpofront:prod" With this output:
/docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
/docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
/docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
10-listen-on-ipv6-by-default.sh: info: /etc/nginx/conf.d/default.conf is not a file or does not exist
/docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
/docker-entrypoint.sh: Launching /docker-entrypoint.d/30-tune-worker-processes.sh
/docker-entrypoint.sh: Configuration complete; ready for start up
2021/08/27 16:42:17 [notice] 1#1: using the "epoll" event method
2021/08/27 16:42:17 [notice] 1#1: nginx/1.20.1
2021/08/27 16:42:17 [notice] 1#1: built by gcc 10.2.1 20201203 (Alpine 10.2.1_pre1)
2021/08/27 16:42:17 [notice] 1#1: OS: Linux 5.4.0-81-generic
2021/08/27 16:42:17 [notice] 1#1: getrlimit(RLIMIT_NOFILE): 1048576:1048576
2021/08/27 16:42:17 [notice] 1#1: start worker processes
2021/08/27 16:42:17 [notice] 1#1: start worker process 23
2021/08/27 16:42:17 [notice] 1#1: start worker process 24
2021/08/27 16:42:17 [notice] 1#1: start worker process 25
2021/08/27 16:42:17 [notice] 1#1: start worker process 26
2021/08/27 16:42:17 [notice] 1#1: start worker process 27
2021/08/27 16:42:17 [notice] 1#1: start worker process 28
2021/08/27 16:42:17 [notice] 1#1: start worker process 29
2021/08/27 16:42:17 [notice] 1#1: start worker process 30
Upvotes: 0
Views: 3394
Reputation: 169
Solved, answer below:
Nginx.conf
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
Dockerfile
# base image
FROM node:14.15.1 as build
# set working directory
WORKDIR /app
EXPOSE 3000
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json package-lock.json ./
#COPY package.json /app/package.json
RUN npm install --silent && npm install [email protected] -g --silent
# add app
COPY . ./
# start and/or build app
RUN npm run build
FROM nginx:1.20.1
#copies React to the container directory
# Set working directory to nginx resources directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static resources
RUN rm /etc/nginx/conf.d/default.conf
# Copies static resources from builder stage
COPY --from=build /app/build /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]
Upvotes: 3