Hosting React with nginx+docker

Norman — Thu, 07 Dec 2023 13:41:33 +0000

Create sample app.

npx create-react-app my-app
cd my-app
npm start

Create Dockerfile.

FROM node:18-alpine

WORKDIR /react-docker-example/

COPY public/ /react-docker-example/public
COPY src/ /react-docker-example/src
COPY package.json /react-docker-example/

RUN npm install

CMD ["npm", "start"]

Build and run docker image.

docker image build -t my-app-image:latest .
docker run -dp 65535:3000 --name my-app-container my-app-image:latest

You can display app in a browser at the following URL.

http://<your-ip>:65535

Hosting index.html with HTTPS using Docker and Nginx

Norman — Sat, 11 Nov 2023 02:26:45 +0000

1) Pull nginx image
docker image pull nginx

2) Create nginx container
docker container run -d -p 443:443 --name mynginx nginx

3) Enter the container
docker container exec -it mynginx bash

4) Create the private key and certificate
mkdir /etc/nginx/ssl

private key
openssl genrsa -out /etc/nginx/ssl/server.key 2048

Certificate Signing Request (CSR)
you can skip through by pressing the Enter key for each prompt
openssl req -new -key /etc/nginx/ssl/server.key -out /etc/nginx/ssl/server.csr

SSL server certificate (CRT)
openssl x509 -days 3650 -req -signkey /etc/nginx/ssl/server.key -in /etc/nginx/ssl/server.csr -out /etc/nginx/ssl/server.crt

5) Edit the Nginx configuration file
vi /etc/nginx/conf.d/ssl.conf

server {
    listen 443 default ssl;
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    ssl_certificate     /etc/nginx/ssl/server.crt;
    ssl_certificate_key /etc/nginx/ssl/server.key;
}

6) Reload the Nginx configuration
service nginx reload

7) Access the following URL
https://container-IP/

DEV Community: Norman

Hosting React with nginx+docker

Hosting index.html with HTTPS using Docker and Nginx