웹 서비스 업데이트

리전 ID

REGION_ID는 앱을 만들 때 선택한 리전을 기준으로 Google에서 할당하는 축약된 코드입니다. 일부 리전 ID는 일반적으로 사용되는 국가 및 주/도 코드와 비슷하게 표시될 수 있지만 코드는 국가 또는 주/도와 일치하지 않습니다. 2020년 2월 이후에 생성된 앱의 경우 REGION_ID.r이 App Engine URL에 포함됩니다. 이 날짜 이전에 만든 기존 앱의 경우 URL에서 리전 ID는 선택사항입니다.

리전 ID에 대해 자세히 알아보세요.

이번 가이드 섹션에서는 업데이트를 작성 및 테스트한 후 이전 섹션인 웹 서비스 배포에서 배포한 웹 서비스 예에 배포하는 방법에 대해서 알아보겠습니다.

시작하기 전에

본 '앱 빌드' 가이드의 이전 섹션을 아직 완료하지 않았다면 다음 순서를 따르세요.

웹 서비스 예시 업데이트

아래 단원에서는 양식과 사용자가 양식을 제출할 때 응답하는 핸들러를 사용해 웹 서비스 예시를 업데이트합니다.

사용자 입력 양식 만들기

사용자가 서버에 데이터를 제출할 수 있게 하려면 HTML 양식을 사용합니다.

my-nodejs-service 폴더에 views라는 폴더를 만들어 HTML 파일을 저장합니다.

views 폴더에 form.html이라는 파일을 만들고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html>
  <head>
    <title>My App Engine App</title>
  </head>
  <body>
    <h2>Create a new post</h2>
    <form method="POST" action="/submit">
      <div>
        <input type="text" name="name" placeholder="Name">
      </div>
      <div>
        <textarea name="message" placeholder="Message"></textarea>
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  </body>
</html>

이 간단한 양식은 사용자가 서버에 전송할 이름 및 메시지를 입력할 수 있게 해줍니다. 이 양식은 <form> 요소의 method 및 action 속성으로 지정된 대로 HTTP POST 요청을 통해 데이터를 /submit에 전송합니다.

이제 파일 구조가 다음과 같이 됩니다.

my-nodejs-service/
  views/
    form.html
  app.yaml
  package.json
  server.js

양식 표시

server.js 파일 맨 위에 다음과 같은 줄을 추가하여 path 모듈을 가져옵니다.
```
const path = require(`path`);
```
사용자가 /submit으로 이동할 때 양식이 표시되도록 다음과 같은 Express 핸들러를 추가합니다.
```
app.get('/submit', (req, res) => {
  res.sendFile(path.join(__dirname, '/views/form.html'));
});
```

제출된 데이터용 핸들러 만들기

사용자가 서버에 메시지를 제출하면 해당 데이터를 포함하는 POST 요청이 /submit에 제출됩니다. 요청 본문에서 데이터를 읽으려면 Express urlencoded 미들웨어를 사용하고 새 요청 핸들러를 만듭니다.

Express urlencoded 미들웨어를 사용하도록 앱을 설정합니다.

// This middleware is available in Express v4.16.0 onwards
app.use(express.urlencoded({extended: true}));

데이터를 읽기 위해 POST 핸들러를 server.js 파일에 추가합니다.

app.post('/submit', (req, res) => {
  console.log({
    name: req.body.name,
    message: req.body.message,
  });
  res.send('Thanks for your message!');
});

이 샘플 핸들러는 사용자 이름과 메시지를 콘솔에 기록하지만 사용자가 데이터에 대한 작업을 수행하고 이를 데이터베이스에 저장할 수도 있습니다.

로컬에서 양식 테스트

변경사항을 배포하기 전에 새 양식을 로컬로 테스트합니다.

Node.js 서버를 시작합니다.
```
npm start
```
http://localhost:8080/submit에서 양식을 확인합니다.

양식과 함께 메시지를 제출합니다. 터미널에 사용자 이름 및 메시지가 표시되는 것을 볼 수 있습니다.

변경사항 배포

업데이트를 배포하면 새 버전의 기본 서비스가 생성되고 트래픽이 자동으로 최신 버전으로 라우팅됩니다. 배포하려면 다음 안내를 따르세요.

my-nodejs-service 폴더에서 다음 명령어를 실행합니다.
```
gcloud app deploy
```
이는 웹 서비스 배포에서 학습한 명령어와 동일한 명령어입니다.
Google Cloud 콘솔에 새 버전이 나열되는지 확인합니다.

버전 확인

이전 및 현재 배포에 해당하는 두 가지 버전이 표시됩니다.

배포 후에는 https://PROJECT_ID.REGION_ID.r.appspot.com/submit에서 새 양식에 액세스할 수 있습니다. 이 양식을 사용하여 메시지를 1~2개 제출합니다.

더 이상 이전 버전이 필요 없으면 Google Cloud 콘솔의 버전 페이지에서 이전 버전을 삭제할 수 있습니다.

다음 단계

이제 앱에 사용자가 데이터를 제출할 수 있는 양식이 있으므로 Google Cloud 콘솔에서 애플리케이션 로그를 보는 방법을 알아보세요.