[16일차] nginx를 이용한 정적 웹사이트 호스팅

 

 

nginx를 이용한 정적 웹사이트 호스팅

 

1. 먼저 깃허브에서 ubuntu node.js 프로젝트 파일을 clone하여 시작했다

2. nginx 설치

•  - sudo apt install nginx
•  - nignx를 통해 client로부터 서버의 요청이 들어왔을 때 응답할 수 있다

3. npm install

4. server 블록 확인

•  - cat /etc/nginx/sites-available/default

 

블로그 작성할때는 이미 수정한터라 예시를 복사해서 가져왔다

 

•  - listen 이라는 지시어에 사용할 포트를, server_name 에는 localhost 혹은 ‘ _ ’가 적힌 것을 볼 수 있다.
•  - Server 블록에 작성한 대로, 샘플 페이지로 접속하기 위해서는 지시어에 적힌 대로 http://localhost:8080 이나, http://localhost 와 같이 지정된 Port와 URL을 사용해야 한다.
•  - Server 블록 안을 살펴보면 각각 root 라는 지시어가 있는 것을 볼 수 있다. 샘플 페이지는 root 지시어에 값으로 html과 /var/www/html (또는 /usr/share/nginx/html)이 적혀있는 디렉토리에 저장되어 있는 것을 알 수 있다

 

5. '.conf' 파일에 Server 블록 작성

 - 먼저 port 번호를 10024로 root를 새로 작성한 html 파일이 있는 경로  /home/jihoon/code/sprint-cozstory-frontend/build;로 경로를 수정했다.

 

6.  sudo nginx -s reload 명령어를 통해 설정을 다시 적용한 후 웹 서버 접속

 

7. CRUD 만들기 - 읽기

 - 나머지는 다 비슷하니 자주 코드 보기

 

코드 설명

 

1. module.exports =

 - module.exports는 require() 함수를 사용했을 때 반환 받는 변수.

 - 비어 있는 객체가 기본값이며 어떤 것으로도 자유롭게 변경할 수 있다.

 - exports 자체는 절대 반환되지 않는다

 - exports는 단순히 module.exports를 참조하고 있다.

 

2. async function (app, opts)

 - function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환합니다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다.

 

3. await

 - await는 async 함수 안에서만 동작한다

 - await 키워드를 만나면 프라미스가 처리될 때까지 기다린다

 

 

● WAS 만들기

 

1. 먼저 깃허브에서 프로젝트 파일을 fork, clone하여 시작했다

2. node.js가 설치된 상태에서 애플리케이션을 보관할 디렉토리를 생성하고 작업 디렉토리로 설정

• - mkdir blue
• - cd blue

3. npm init 명령어를 통해 package.json파일을 생성

4. blue 디렉토리에 Express를 설치한 후 종속 항목 목록에 저장

• - npm install express —save (임시 설치가 아닐 경우 —save를 빼면된다)

5. cd /code/sprint-mini-node-server/server 디렉토리 이동

• - cat server-express.js 파일 확인

블로그 작성할때는 이미 수정한터라 수정본을 가져왔다

 

1). Express 서버를 생성하기 위해서 express 함수를 호출하여 app 변수에 할당하고, 서버의 port(포트)번호를 지정한다.

- 해당 app에는 express() 함수를 통해 만들어진 객체가 할당된다

   const express = require('express')

   const app = express()

   const port = 3000

 

2). HTTP 요청 중, 메소드가 get, 엔드포인트(Endpoint)가 /인 요청을 또 다른 함수로 처리하는 비지니스 로직입니다. 요청에 대한 정보는 req 객체에, 서버에서 보내야 하는 답변에 대한 정보는 res 객체에 담겨있으며, res.send() 를 통해 원하는 데이터를 클라이언트에 보낼 수 있습니다. 현재 이 코드에서는 Hello World! 라는 문구를 응답으로 보내고 있다.

   app.get('/', (req, res) => {

   res.send('Hello World!')

   })

 

3). app 객체의 listen 메소드를 사용하였습니다. 기본 형태는 app.listen(port, callback) 와 같습니다. listen 메소드는 특정 호스트와 port에서 연결을 수신한다라는 것을 표현하기 위해서 사용한다

   app.listen(port, () => {

   console.log(`Example app listening at http://localhost:${port}`)

   })

 

4). 상단에 const cors = require(’cors’) 라고 적힌 것을 볼 수 있다.

app.use(cors()) 를 작성하면, CORS 관련 복잡한 설정을 따로 하지 않고, cors 함수를 통해 처리할 수 있다.

 

5). 먼저 요청은 모두 POST 메소드를 사용하기 때문에 app.post()형태의 메소드를 사용했다. 여기에 각각의 요청은 엔드포인트에 따라 다르게 들어오며, 엔드포인트 별로 분기, 라우팅을 했다. 여기서는 일단 /upper 로 라우팅을 하였고, 뒤이어 callback 함수로 들어온 문자열을 대문자로 변경하는 자바스크립트 메소드를 사용했다.

   app.post('/upper', (req, res) => {

   let data = req.body.toUpperCase();

   res.json(data);

   })

 

 

=========================================================

 

참고자료 - fastify CRUD 만들기

https://www.fastify.io/docs/latest/Reference/Reply/

https://www.fastify.io/docs/latest/Reference/Request/

https://app.swaggerhub.com/apis-docs/hoyonglee/cozstory-was/1.0.2

 

참고 자료 - express

https://expressjs.com/ko/4x/api.html#res

https://expressjs.com/en/api.html#app

https://expressjs.com/ko/starter/hello-world.html