CozStory 클라이언트 호스팅

#해결 과제

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

 

#실습 자료

• 레파지토리 : https://github.com/cs-devops-bootcamp/sprint-cozstory-frontend

CozStory 개요

<개요>

• 간단한 블로그 애플리케이션

<기능>

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

<구조>

• 클라이언트-서버 아키텍처

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

 

#과제 항목별 진행 상황

💡 소스 코드 빌드하기 - 주어진 레포지토리의 코드를 빌드

$ npm run build

> blog@0.1.0 build
> react-scripts build

Creating an optimized production build...
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

$ npm install -g serve

added 89 packages in 16s

24 packages are looking for funding
  run `npm fund` for details
$ serve -s build

   ┌────────────────────────────────────────┐
   │                                        │
   │   Serving!                             │
   │                                        │
   │   - Local:    http://localhost:3000    │
   │   - Network:  http://10.0.2.15:3000    │
   │                                        │
   │   Copied local address to clipboard!   │
   │                                        │
   └────────────────────────────────────────┘

 INFO  Gracefully shutting down. Please wait...

💡 빌드한 정적 파일 호스팅 하기
- 빌드한 정적 파일들을 호스팅하기 위해서 nginx.conf 파일을 작성
    - port 번호: 10024
    - Server 블록과 Location 블록을 작성
    - http://localhost:10024으로 접속해 아래와 같은 그림이 뜨는지 확인

# 심볼릭 링크
$ pwd
/etc/nginx/sites-enabled

$ ll
합계 8
drwxr-xr-x 2 root root 4096  3월 27 09:38 ./
drwxr-xr-x 8 root root 4096  3월 27 09:47 ../
lrwxrwxrwx 1 root root   43  3월 27 09:38 nginx_study -> /etc/nginx/sites-available/nginx_study.conf

# 실제 파일 위치
$ pwd
/etc/nginx/sites-available

$ ll
합계 16
drwxr-xr-x 2 root root 4096  3월 27 14:22 ./
drwxr-xr-x 8 root root 4096  3월 27 09:47 ../
-rw-r--r-- 1 root root  334  3월 27 14:22 nginx_study.conf

# 파일 내용
server {
	listen 10024;
	server_name localhost;

	location / {
		root /{경로명}/sprint-cozstory-frontend/build;
		index index.html;
	}

	location /article {
		proxy_pass http://localhost:3000;
	}
}

#궁금해하기

💡 분명 우리는 웹 서버를 만들어 정적 파일을 호스팅했는데, 서버와 연결이 되지 않았다고 뜨는 이유가 무엇일까요?

→ 실제로 WAS 서버(백엔드)와 연결이 되지 않았기 때문

💡 어떤 서버를 추가적으로 연결해줘야 할까요?

→ BACKEND 서버 연결

 💡 어떻게 하면 추가적인 서버와의 연결을 할 수 있을까요?

→ nginx.conf 파일에 백엔드(API) 서버를 추가

 

#참고 자료

• https://partnerjun.tistory.com/73