1.7 정적 웹 사이트에서 API 호출하기

지금까지 API를 구성했습니다. API만으로도 서비스가 가능할까요? 이를 호출할 클라이언트가 없다면 서비스가 될 수 없을 겁니다. 작성한 Node.js 서버는 웹 사이트를 뿌리도록 서버 사이드 렌더링Server Side Rendering 방식을 택할 수도 있습니다. 그렇지만 이번에는 정적 웹 사이트를 하나의 앱이라고 생각하고 서버에 데이터만 요청해 UI에 반영하려고 합니다. 작업한 내용이 어떻게 표현되는지 확인하고, 클라우드프론트CloudFront와 S3로 정적 웹 사이트를 호스팅해 봅시다.

먼저 깃 리포지토리Git repository를 가져옵니다.

# Work directory로 이동
ec2-user:~/environment $ cd ~/environment

# !! 여기서는 yarn으로 패키지를 설치. npm으로 설치하게 되면 Parcel bundler가 제대로 동작하지 않습니다.
ec2-user:~/environment $ curl --silent --location \
     https://dl.yarnpkg.com/rpm/yarn.repo | \
     sudo tee /etc/yum.repos.d/yarn.repo
ec2-user:~/environment $ sudo yum install yarn
ec2-user:~/environment $ yarn --version

# Git repository clone하기
ec2-user:~/environment $ git clone https://github.com/novemberde/serverless-todo-demo.git

# Static Web Site를 구성한 directory로 이동
ec2-user:~/environment $ cd serverless-todo-demo/static-web-front

# npm으로 package 설치
ec2-user:~/environment/serverless-todo-demo/static-web-front $ yarn install

# Static Web Site 시작하기
ec2-user:~/environment/serverless-todo-demo/static-web-front $ npm start

> serverless-todo-demo-app@1.0.0 start /Users/kyuhyunbyun/WorkSpace/workshop/serverless-todo-demo/static-web-front
> npx parcel src/index.html

Server running at http://localhost:1234
✨  Built in 3.99s.


가져온 정적 웹 페이지는 출력되지만 현재 웹이 호출하는 API의 주소를 수정해야 현재 올린 API를 사용할 수 있습니다. 다음과 같은 파일을 열어 baseUrl 값을 수정합니다. 이 값은 API를 배포했을 때 복사한 클라우드프론트CloudFront의 주소입니다.

복사하지 않으셨다면 ‘Cloud 9에서 배포하기’를 다시 참고해 URL을 확인하기 바랍니다.


  • static-web-front/src/components/App.js

import 'setimmediate'
import React from 'react'
import styled from 'styled-components'
import axios from 'axios'
import MaterialUiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import { List, ListItem } from 'material-ui/List'
import { TextField, RaisedButton } from 'material-ui'
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import Top from './Top'

const baseURL = 'CLOUD_FRONT_URL';  // Insert your CloudFront url.
...


정상적으로 동작하는지 확인하고 싶다면 새로운 터미널을 열고(맥은 option+t, 윈도우는 alt+t) 다음과 같이 확인을 합니다.

ec2-user:~/environment $ curl localhost:1234
<html>
 <head>
   <meta charset="utf-8">
   <link rel="stylesheet" href="/src.7afc2ec1.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
 <script src="/src.7afc2ec1.js"></script></head>
 <body>
   <div id="app"></div>
   <script src="/src.1e244cd7.js"></script>
 </body>
</html>


정상적으로 출력될 것입니다. 그런데 EC2는 네트워크를 통제하고 있습니다. Cloud 9은 EC2를 생성해 사용하기 때문에 보안 그룹Security Group에서 포트를 열어야 외부에서 접근이 가능합니다.


Security Group Setting에 들어가 보안 그룹 중 aws-cloud9-serverless-hands-on을 선택합니다.


편집(Edit)을 눌러서 인바운드 규칙으로 ‘TCP / 1234 / 위치 무관(Anywhere)’을 추가합니다.


이제 브라우저를 열고 http://{CLOUD9_PUBLIC_DNS}:1234 에 접속하시면 다음과 같은 화면을 볼 수 있습니다.

참고로 CLOUD 9_PUBLIC_DNS 확인은 EC2 콘솔에서 할 수 있습니다. 이게 귀찮다면 터미널에 다음 명령어를 입력해도 됩니다. 간단히 퍼블릭Public IP를 얻을 수 있습니다. 그럼 CLOUD9_PUBLIC_DNS 대신 이 IP를 넣어서 접속해봅니다.

ec2-user:~/environment $ curl http://checkip.amazonaws.com/

Xxx.xxx.xxx.66  ⇒ Server IP



이제 마음껏 추가 삭제 수정을 해보세요! 😀