[Sprint] CozStory 클라이언트 호스팅

by

⭐ CozStory 프론트엔드를 빌드하고, nginx를 이용해 정적 웹사이트로 호스팅하세요.

CozStory 개요

CozStory는 간단한 블로그 애플리케이션으로, 다음과 같이 간단한 CRUD 기능을 포함하고 있습니다.

  • 새 글 쓰기 (create)
  • 블로그 글 목록 조회 (read)
  • 글 수정 (update)
  • 글 삭제(delete)

CozStory는 또한 클라이언트-서버 아키텍처로 구성되어 있는 전형적인 웹 애플리케이션이며, 다음의 아키텍처를 가지고 있습니다.

  • nginx 웹 서버를 통해 클라이언트(프론트엔드)를 제공합니다. 프론트엔드는 React라는 기술로 작성되었습니다. (하늘색 원자로 모양의 로고가 React를 의미합니다)
  • node.js 기반의 fastify 프레임워크로 작성된 WAS가 리소스를 제공하고, 앞서 설명한 비즈니스 로직(CRUD 등)을 수행합니다. 즉, 백엔드 역할을 합니다.

CozStory 클라이언트 호스팅

1. 소스 코드 빌드하기

# npm 의존성 패키지를 설치한다.
$ npm install
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1245 packages, and audited 1246 packages in 57s

164 packages are looking for funding
  run `npm fund` for details

24 vulnerabilities (3 low, 1 moderate, 17 high, 3 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

# 패키지가 설치된 후 node_modules 디렉토리가 생성된 것을 확인할 수 있다.
$ ls
node_modules  package.json  package-lock.json  public  README.md  src

# 소스 코드를 빌드한다.
$ npm run build
> blog@0.1.0 build
> react-scripts build

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.

File sizes after gzip:

  61.77 kB  build/static/js/main.1e1f21b4.js
  1.77 kB   build/static/js/787.0f10631d.chunk.js
  490 B     build/static/css/main.dec85a0c.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

# 빌드 후 build 디렉토리가 생성된 것을 확인할 수 있다.
$ ls
build  node_modules  package.json  package-lock.json  public  README.md  src

2. 빌드한 정적 파일 호스팅 하기

nginx.conf 파일의 Server 블록 수정

server {
        listen 10024;
        server_name localhost;

        location / {
                   root /home/oh/codeStates/CozStory/sprint-cozstory-frontend/build;
                   index index.html;
        }
}

3. CozStory 웹 페이지 확인하기

Leave a Comment