ghkdqhrbals / portfolio Goto Github PK

ERROR

nginx | 164.125.222.37 - - [26/Jul/2022:08:23:30 +0000] "GET / HTTP/1.1" 502 157 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15" "-"

Docker containers

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
78c1220d18c4 portfolio_nginx "/docker-entrypoint.…" 5 minutes ago Up About a minute 0.0.0.0:80->80/tcp, :::80->80/tcp nginx
5d78cbb01830 portfolio_client "docker-entrypoint.s…" 5 minutes ago Up About a minute client

nginx/nginx.conf

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {                     
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    upstream docker-client {
        server client:3000;
    }
    server {
        listen 80;
        server_name localhost;
        ...
        location / {
            proxy_pass         http://docker-client;
                proxy_redirect     off;
                proxy_set_header   Host $host;
                proxy_set_header   X-Real-IP $remote_addr;
                proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        ...    
}

Solution
https://stackoverflow.com/questions/70010475/cant-access-sub-paths-on-nginx-react-router-behind-a-proxy

If you want to run app in locally, you should set server_name as localhost or 127.0.0.1
When nginx proxy get request in http://localhost, nginx pass it to client(docker container). At this time, client get request with http://{server_name}:{client_port}. So client react-router cannot read

In AWS EC2 instance, i want to set up docker infrastructure.

So i run docker compose up to run npm install & build & run for my portfolio web.

But, in npm install stage, it is TOO SLOW.

Dockerfile.prod

FROM node:18-alpine3.16 AS builder
WORKDIR /react-portfolio-website

ENV PATH="./node_modules/.bin:$PATH"
COPY package.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx
COPY --from=builder /react-portfolio-website/build /usr/share/nginx/html

docker-compose.yml

version: "3.8"

services:
app:
build:
context: .
dockerfile: Dockerfile.prod
volumes:
- .:/react-portfolio-website
ports:
- "80:80"
command: npm start

How can i reduce npm install time?

Error

gyuminhwangbo@Gyuminui-MacBookPro react-portfolio-website % docker compose up
[+] Running 0/1
⠿ app Error 3.6s
[+] Building 58.7s (11/11) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 443B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:18-alpine3.16 2.1s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load build context 4.2s
=> => transferring context: 4.28MB 4.1s
=> CACHED [1/5] FROM docker.io/library/node:18-alpine3.16@sha256:b3ca07adf425d043e180464aac97 0.0s
=> [2/5] WORKDIR /usr/src/app 0.0s
=> [3/5] COPY package*.json ./ 0.4s
=> [4/5] RUN npm install 37.1s
=> [5/5] COPY . . 7.2s
=> exporting to image 7.4s
=> => exporting layers 7.4s
=> => writing image sha256:a42e06df674b5eac0045e450eacb365a0a197d9309e88bcd085e0ac510b7632f 0.0s
=> => naming to docker.io/library/portfolio:latest 0.0s

gyuminhwangbo@Gyuminui-MacBookPro react-portfolio-website % docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
react-portfolio-website_app latest d53f7195851e 5 minutes ago 865MB
simplebank_api latest 7da6148aa0f0 3 days ago 52.1MB
postgres 12-alpine 3496e5bc48fb 7 weeks ago 211MB
golang 1.18.3-alpine3.16 155ead2e66ca 7 weeks ago 328MB
alpine 3.16 e66264b98777 2 months ago 5.53MB