[React]빌드 배포

1차시도 

 

npm i serve 로 serve 모듈을 이용한 배포

npm run build 실행하면 프로젝트 경로에 build 폴더가 생김

build 폴더안에서 npx serve 하면 페이지가 열리긴 하는데 템플릿때문에 사용한 a 태그와 form 에 action 기능 (라우터관련)들이 전부 404처리 되는 문제 발생

정적인 페이지만 로드되는 듯 보임

 

2차시도

 

npm i express 로 express 서버 다운로드

/public 경로에 server.js 파일 만들고

https://velog.io/@ghrfde/react-router-404-error

const express = require("express");
const path = require("path");
const app = express();
app.use(express.static(__dirname));
app.get("*", function(req, res) {
  res.sendFile(path.resolve(__dirname, "index.html"));
});
function handleListenLog() {
  console.log("Server Starting...");
}
app.listen(5000, handleListenLog);

해당 소스 실행

npm run build 실행하면 프로젝트 경로에 build 폴더가 생김

build 폴더 안에 server.js 파일도 같이 빌드 되어있고 node server.js 로 실행하면 라우터 이슈 없이 동작 잘함

 

 

+ 

Docker 시도

 

desktop docker 실행 해두기

리액트 플젝에서 npm run build 실행 

[배포관련 필요한 파일들]

빠른실행을 위한 배치파일들과 최신 package.json , 도커파일, 도커 컴포트 얌 파일 build 경로에 넣어두기

#도커 up and start
docker-compose up --build

#도커 빌드는 되어있을때 start
docker-compose start

#도커 실행 중단
docker-compose stop

# Dockerfile

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install --save express

# start app
CMD ["node", "server.js"]

#Docker-compose.yml #centos에서는 D 대문자,

version: '3.7'

services:
  krdc:
    container_name: krdc
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '3000:3000'
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true