web app tutorial
1.0.0
이 튜토리얼 Node.js 앱은 여기에서 액세스 할 수 있습니다.
이 노드 웹 앱은 Express가 제공하는 React 웹 앱입니다. 그것은 Dockerized와 AWS Elastic Beanstalk에 게시되었습니다.
먼저 'My-App'이라는 React 앱을 만들고 폴더로 이동하십시오.
npx create-react-app my-app
cd my-app
그런 다음 Express를 설치하고 저장하십시오.
npm install express --save
위의 단계를 완료하면 개발 모드에서 React 앱을 실행할 수 있습니다 : npm run start
다음과 같이 'server.js'파일을 만들고 프로젝트 루트 폴더에 저장하십시오.
const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
const PORT = process.env.PORT || 8080;
const HOST = '0.0.0.0';
app.get('/hello', (req, res) => {
return res.send('Hello World!')
});
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT);
console.log(`Running on http://${HOST}:${PORT}`);
package.json 파일에서 추가 :
"proxy": "http://localhost:8080"
위의 단계를 완료 한 후에는 React 앱에서 빌드를 실행할 수 있습니다.
npm run build
React 앱을 제공하기 위해 Express를 실행하십시오.
node server.js
Docker를 사용하려면 Docker에 가입하고 필요에 따라 Docker 및/또는 Docker Desktop을 설치하십시오. Docker 설치가 완료되면 실행하여 'dockerfile'이라는 파일을 만듭니다.
touch Dockerfile
Dockerfile에서 빌드 할 이미지를 지정하십시오. Node.js 앱의 최신 이미지 번호는 Docker Hub에서 사용할 수 있습니다.
FROM node:14
다음으로 앱의 작업 디렉토리를 만듭니다.
WORKDIR /usr/src/app
그런 다음 package.json을 복사하고 다음 줄을 추가하여 종속성을 설치하십시오.
COPY package*.json ./
RUN npm install
앱의 소스 코드를 묶으려면 다음을 추가하십시오.
COPY . .
앱은 포트 8080에서 실행 되므로이 줄을 추가하십시오.
EXPOSE 8080
앱을 시작하기위한 명령을 지정하여 끝납니다.
CMD [ "node", "server.js" ]
완전한 dockerfile은 다음과 같습니다.
FROM node:14
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 8080
CMD [ "node", "server.js" ]
.dockerignore 파일을 만들고 다음과 같이 줄을 추가하십시오. node_modules npm-debug.log 로그 로컬 노드 모듈과 디버그 로그가 Docker 이미지에 복사되는 것을 방지합니다. .dockerignore의 스크린 샷 : 
Docker 이미지를 작성하려면 다음 명령을 실행하십시오.
docker build -t <your username>/<your app name> .
포트 49160에서 내장 이미지를 실행하려면 실행 :
docker run -p 49160:8080 -d <your username>/<your app name>
-p 플래그는 공개 포트를 컨테이너 내부의 개인 포트로 리디렉션합니다.
이미지가 실행 중인지 확인하려면 실행 :
docker ps
원격 Docker 이미지를 AWS Elastic Beanstalk에 배포하려면 이미지를 Docker Hub로 푸시하십시오.
docker push <your username>/<your app name>:latest
자세히 알아보십시오
참고로 Node.js는 여기에서 Node.js 앱을 Dockerize하는 방법에 대한 안내서를 게시했습니다.
이전에 AWS 탄성 콩나무를 사용하지 않은 경우 문서를 읽음으로써 시작할 수 있습니다.
다음과 같이 dockerrun.aws.json 파일을 만듭니다.
{
"AWSEBDockerrunVersion": "1",
"Image": {
"Name": "your-docker-username/repo-name",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "8080"
}
]
}
여기에는 Elastic Beanstalk가 가져와야하는 원격 Docker 이미지에 대한 정보가 포함됩니다. 그런 다음 탄성 Beanstalk 앱을 만들고이 파일을 업로드합니다.
Elastic Beanstalk에서 앱을 설정하려면 먼저 Elastic Beanstalk 콘솔 -> 응용 프로그램으로 이동하여 "새 응용 프로그램 작성"을 클릭하십시오.
신청 이름을 입력하십시오 : 
방금 만든 앱의 "새로운 환경 만들기"를 클릭하십시오. 
이 앱의 '웹 서버 환경'을 선택하십시오. 
'플랫폼'의 경우 'Docker'를 선택하고 원하는대로 플랫폼 브랜치 및 버전을 선택하십시오.
'애플리케이션 코드'의 경우 '코드 업로드'를 선택하고 방금 만든 Dockerrun.aws.json을 업로드하십시오. 
'더 많은 옵션 구성'으로 이동하여 사전 설정 구성을 선택하거나로드 밸런서가 포함 된 구성을 만듭니다. 
앱은 잠시 안에 생성되며 ElasticbeanStalk 주소에 배치됩니다. 
자세히 알아보십시오
참고로 AWS에는 AWS Elastic Beanstalk에 Docker 컨테이너 배포에 대한 문서가 있습니다.
원하는대로 모든 플랫폼에서 도메인 주소를 구매할 수 있습니다. 이 예제는 배포 된 앱을 Google 도메인에서 구매 한 주소로 연결하는 방법을 보여줍니다.
먼저 원하는 도메인 이름을 선택하여 구매하십시오.
도메인 주소는 구매 후 Google 도메인 계정에 표시됩니다. 왼쪽 메뉴에서 'DNS'로 이동하여 '사용자 정의 리소스 레코드'로 스크롤하십시오.
cname 레코드를 추가하고 탄성 Beanstalk 앱 주소를 'data'로, 'name'으로 'www'로 넣습니다. 
또한 'DNS'페이지에 사용자 정의 이름 서버를 추가해야합니다. "이름 서버"섹션 에서이 작업을 수행합니다. 
AWS에 따르면, '호스팅 된 영역은 도메인의 DNS 쿼리에 응답하는 방법 53에 알려줍니다. 먼저 AWS Route 53에서 호스팅 된 영역을 만들어 봅시다.
AWS 콘솔의 Route 53으로 이동 한 다음 '호스팅 된 영역'으로 이동하십시오.
'호스팅 된 영역 만들기'를 클릭하고 방금 구입 한 도메인 주소를 입력하십시오. 
호스팅 된 영역이 만들어집니다. 
Google 도메인에서 유형 'NS'에 나열된 '값'을 하나씩 '사용자 정의 이름 서버'로 복사하십시오. 
Google 도메인에 대한 변경 은 적용되기까지 최대 48 시간이 걸릴 수 있습니다.
HTTPS를 설정하려면 AWS에 대한 SSL 인증서를 받고 도메인 주소에 연결해야합니다.
