How to disable NGINX logging with file - reactjs

I am very new to Nginx and noticed that whenever I hit my server locally it logs. I was wondering, what config files do I need to create (and where do I put them) and what do I have to put into them to disable that behavior (I am trying to prevent spew). I am running my application on aws and am getting a lot of log lines of the form '172.31.22.19 - - [23/Jun/2021:23:38:33 +0000] "GET / HTTP/1.1" 200 3022 "-" "ELB-HealthChecker/2.0" "-"' Is there a way to disable that? Or do I need to disable everything?
My docker file is:
# pull official base image
FROM node:16 AS builder
# set working directory
WORKDIR /app
# install app dependencies
#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 . ./
RUN npm run build
#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
#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 -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]
I can successfully run the above with 'docker run -p 80:80 my-app'

if you are using a docker run command to run the container then add the flag --log-driver none to the run command
Looking at your dockerfile youre running node and nginx in a single container. I would advise against this and seperate them into seperate containers using docker-compose
if you do this then add the line driver: none to the service running the nginx container

I fixed the issue by adding a nginx.conf file (see below) and changing the value of access_log to 'off'. I describe the steps I took
get the nginx.conf file:
Per What is the 'default' nginx.conf that comes with docker Nginx image? do the following:
# Create a temporary container
docker run -d --rm --name mynginx nginx
# Copy the nginx configuration in the container
docker cp mynginx:/etc/nginx .
create nginx.conf file in root of project. Mine was:
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log off;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
Modify Dockefile to (note the 'COPY nginx.conf /etc/nginx/nginx.conf'):
# pull official base image
FROM node:16 AS builder
# set working directory
WORKDIR /app
# install app dependencies
#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 . ./
RUN npm run build
#Stage 2
#######################################
#pull the official nginx:1.19.0 base image
FROM nginx:1.19.0
COPY nginx.conf /etc/nginx/nginx.conf
#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 -rf ./*
# Copies static resources from builder stage
COPY --from=builder /app/build .
EXPOSE 80
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

Related

nginx:alpine config not correctly work with dockerimage

I want to host my angular app in my local browser.
This is my docker file configuration:-
FROM node:10.13.0-alpine as builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm cache clean --force
COPY . ./
RUN npm install
RUN npm run build --prod
FROM nginx:alpine
COPY --from=builder /usr/src/app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Now I try to build image and run it on localhost:8080 :-
PS C:\github_programming\ASP.NET and Angular\QuizQuestion\Fornted> docker run --name quizquestion1 -d -p 8080:80 quizequstion
005fd1a397f38c54675b24be1a502b32edadc5f653bcda8bee07b62c4448b3a7
I am only able to see only nginx welcome page.
If I browse http://localhost:8080/quiz:-
But it is working with npm start:-
I have little confused what I have missed here.
I do this exercise after I get a suggestion from Mr.Dave Maze
It shows lots of unwanted folder.So, I change the following in my docker file:-
FROM nginx:alpine
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
now folder structure like that:-
But it doesn't work, I am not getting desired result.
http://localhost:4000/quiz
PS C:\github_programming\ASP.NET and Angular\QuizQuestion\Fornted>
Docker run command:-
docker run --name quizquestion4 -d -p 4000:80 quizequstion
22ac476a121d221808415a2f59c6f511e765fd7d5325c03b9ff320905e0cd02c.
yup it working fine without docker.
Things I have noticed:-
If I have changed the app-routing.modules like that:-`
{ path: '', component: QuizComponent},
{ path: 'quiz', component: QuizComponent},
{ path: 'question', component: QuestionComponent },
{ path: 'question/:quizId', component: QuestionComponent },
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent},
{ path: 'customer-list', component: CustomerListComponent},
Then I create new docker image and rebuild it.
I run it on port on http://localhost:4001:- I can see the quiz form
But routing http://localhost:4001/quiz doesn't work. It gives me 404 not found.
Yes locally, without dockerimage it is working:-
So for angular routing do I need to do any additions things to make docker image.
I tag angular js for that.
I think I missed something in docker build.
Any suggestion regarding this.
Thank you
for docker container if you did not specific any host it will launch on the docker container ip.
you can get this by (below) and get the IPAddress (lots of other good info there too!)
docker inspect <container id>
if you just want the IPAddress:
docker inspect <container id> | grep "IPAddress"
https://docs.docker.com/config/containers/container-networking/
By default, the container is assigned an IP address for every Docker
network it connects to. The IP address is assigned from the pool
assigned to the network, so the Docker daemon effectively acts as a
DHCP server for each container. Each network also has a default subnet
mask and gateway.
Finally I found the solution:-
So, I change the dockerfile content:-
FROM node:10.13.0-alpine as builder
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm cache clean --force
COPY . ./
RUN npm install
RUN npm run build --prod
# FROM nginx:alpine
# COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
# EXPOSE 80
# CMD ["nginx", "-g", "daemon off;"]
FROM nginx:1.15.8
EXPOSE 80
COPY conf/default.conf /etc/nginx/conf.d/
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Also we need to create Nginx configuration file in the project folder.
like that:-
Code for configuration file:-
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json
application/javascript application/x-javascript text/xml application/xml
application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
See help :- https://javascript.plainenglish.io/angular-10-on-docker-to-production-61ee6e84006
Thanks to all contributor for this post

react docker nginx kubernetes 404

::: UPDATE :::
It seems to be a SSL issue. I changed the nginx.conf to port 80 and it works.
I am trying to solve the problem of the 404 errors in React when a user clicks refresh.
The application runs in Docker in Kubernetes on Azure.
I have tried changing the nginx.conf file and pulling it into the container.
Even though the Docker builds, it seems like the container is still running the default nginx.conf.
nginx.conf
server {
listen 443 ssl;
location / {
root /var/www;
index index.html index.htm;
try_files $uri $uri/ /index.html?$args;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /var/www;
}
}
Docker file
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install
RUN npm install react-scripts#3.4.1 -g
COPY . ./
RUN npm run build
# production environment
FROM nginx:alpine
# copy the build folder from react to the root of nginx (www)
COPY --from=build /app/build /var/www
# --------- only for those using react router ----------
# if you are using react router
# you need to overwrite the default nginx configurations
# remove default nginx configuration file
RUN rm /etc/nginx/conf.d/default.conf
# replace with custom one
COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 443
CMD ["nginx", "-g", "daemon off;"]
Project Structure

React app deployed with docker and nginx : /etc/nginx/conf.d/default.conf differs from the packages

hi I am having a problem to deploy my React app ( create react app) using docker and nginx
the image is created with success : using the following script :
docker build -t front --network=host .
howver when I try to run the container : docker run -p 3000:80 front
it is not working and I got the following message :
10-listen-on-ipv6-by-default.sh: /etc/nginx/conf.d/default.conf differs from the packages version, exiting
my docker file :
FROM node:12.19.0-alpine3.12 as build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
#ARG REACT_APP_BACKENDURL
#ENV REACT_APP_BACKENDURL $REACT_APP_BACKENDURL
# install and cache app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts#3.2.0 -g --silent
COPY . ./
RUN npm run build
# add app
#COPY . /app
# generate build
#RUN npm run build
############
### test ###
############
# base image
FROM nginx:1.19.0-alpine
# copy artifact build from the 'build environment'
COPY --from=build /app/build /usr/share/nginx/html
#nginx config with react router
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
# expose port 80
EXPOSE 80
#COPY .env /usr/share/nginx/html
# run nginx
CMD ["nginx", "-g", "daemon off;"]
my nginx.conf :
server {
listen 3000;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
any ideas what I did wrong,, also I am looking for best practices to deploy REACT APP with docker
You should separate dockefile above into 2 dockerfile,
One for front image , one for nginx.
Then create both images. And 2 containers are belong to those images.
Expose dockerfile nodejs : 3000
And add to nginx configuration file: proxy_pass ip_address_nodejs_container:3000

How to make a single React Docker build/image to run through all environments?

i'm trying to deploy a React application in a single Docker container able to run through dev, preprod and prod on an OpenShift platform on which i can only push tagged docker images. In order to do this i have:
a React application generated with create-react-app hosted on Github
a Dockerfile at project root containing the docker build/run process
a .gitlab-ci.yml file containing the continuous integration checks and deploy methods
an accessible OpenShift platform
What i can do:
I can easily generate a production build '/build' that will be added in the docker image build phase and will run with a production context or i can build at run start (but just writing it feels bad).
The problem:
This generated image isn't able to run through all environment, and i don't want to have a specific build for each environment.
What i want:
I want to be able to generate a single docker image that will run through all environments without having to install dependencies or build when only RUN is needed.
here is my Dockerfile:
FROM nginx:1.15.5-alpine
RUN addgroup --system app \
&& adduser --uid 1001 --system --ingroup app app \
&& rm -rf /etc/nginx/conf.d/default.conf \
&& apk add --update nodejs nodejs-npm \
&& mkdir /apptmp
COPY . /apptmp
RUN chmod 777 /apptmp
COPY config/default.conf /etc/nginx/conf.d/
COPY config/buildWithEnv.sh .
RUN touch /var/run/nginx.pid && \
chown -R app:app /var/run/nginx.pid && \
chown -R app:app /var/cache/nginx && \
chown -R app:app /usr/share/nginx/html
EXPOSE 8080
USER 1001
CMD sh buildWithEnv.sh
And here is the script buildWithEnv.sh
#!/bin/bash
echo "===> Changin directory: /apptmp ..."
cd /apptmp
echo "===> Installing dependencies: npm install ..."
npm install
echo "===> Building application: npm run build ..."
npm run build
echo "===> Copying to exposed html folder ... "
rm -rf /usr/share/nginx/html/*
cp -r build/* /usr/share/nginx/html/
echo "===> Launching http server ... "
nginx -g 'daemon off;'
A possible approach is described on this blog-post
Basically: You use placeholders for all environment specific parts in your static resources. Then you configure nginx' sub_filter to replace those at runtime with the environment specific values.
I finally found a way.
Build application
The first step is to make a static build of your application, environment agnostic. (Actually for my situation this is done by the CI so i directly retrieve the static build in Docker build part)
Create Nginx conf
In your project, create a file holding the default configuration for nginx, plus the reverse proxy configuration your need, and fill the proxy_pass with values easily and uniquely replacable.
server {
gzip on;
gzip_types text/plain application/xml application/json;
gzip_vary on;
listen 8080;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_set_header x-clientapikey REACT_APP_BAMBOO_API_KEY;
proxy_pass REACT_APP_SERVICE_BACK_URL;
}
location /auth {
proxy_set_header Authorization "Basic REACT_APP_AUTHENTIFICATION_AUTHORIZATION";
proxy_pass REACT_APP_SERVICE_AUTH_URL;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Openshift configuration
In your OC application, go to the "environment" tab, and add all the environnement variables you will use in your nginx conf.
Dockerfile build
In the dockerfile build part, move your build to its correct position into nginx html folder, and handle your configuration files, including nginx.
FROM nginx:1.15.5-alpine
RUN addgroup --system app \
&& adduser --uid 1001 --system --ingroup app app \
&& rm -rf /etc/nginx/conf.d/default.conf \
&& apk --update add sed
COPY ./build /usr/share/nginx/html/
COPY config/default.conf /etc/nginx/conf.d/
RUN chmod 777 -R /etc/nginx/conf.d/
COPY config/nginxSetup.sh .
RUN touch /var/run/nginx.pid && \
chown -R app:app /var/run/nginx.pid && \
chown -R app:app /var/cache/nginx && \
chown -R app:app /usr/share/nginx/html
EXPOSE 8080
USER 1001
CMD sh nginxSetup.sh
Dockerfile run
In the dockerfile run part (CMD), just use the command line tool sed in order to replace paths in your nginx reverse proxy configuration.
#!/usr/bin/env bash
sed -i "s|REACT_APP_SERVICE_BACK_URL|${REACT_APP_SERVICE_BACK_URL}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_SERVICE_AUTH_URL|${REACT_APP_SERVICE_AUTH_URL}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_BAMBOO_API_KEY|${REACT_APP_BAMBOO_API_KEY}|g" /etc/nginx/conf.d/default.conf
sed -i "s|REACT_APP_AUTHENTIFICATION_AUTHORIZATION|${REACT_APP_AUTHENTIFICATION_AUTHORIZATION}|g" /etc/nginx/conf.d/default.conf
echo "===> Launching http server ... "
nginx -g 'daemon off;'
And here you are.

How do I serve static files from my react build in a docker container

I am new to docker and building projects. I am trying to put my react app in a docker container with nginx, but when I run the container I get a blank page with 404 errors for the files in the static dir. I basically followed this article: https://blog.aevitas.co.uk/running-react-on-docker-with-nginx/
I used create-react-app and I haven't changed anything in webpack. This is how my files look:
Dockerfile:
#Node image
FROM node:8.11.3 as builder
#Create app directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
COPY . .
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
ADD package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts#1.1.1 -g
RUN npm run build
CMD ["npm", "start"]
FROM nginx:1.13.3-alpine
RUN rm -rf /usr/share/nginx/html/*
COPY nginx/default.conf /etc/nginx/conf.default
COPY --from=builder /usr/src/app/build /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
default.config:
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
I'd read the article https://blog.aevitas.co.uk/running-react-on-docker-with-nginx/, and what I did:
1 - npx create-react-app sample
2 - Inside the sample directory I created a directory nginx with default.conf
3 - Change COPY nginx/default.conf to COPY ./nginx/default.conf
4 - Build image: docker build -t react-app .
5 - Run: docker run --name react-app-run -p 8080:80 react-app:latest
6 - Access: localhost:8080
Working perfectly!

Resources