web app tutorial
1.0.0
แอป Tutorial Node.js นี้สามารถเข้าถึงได้ที่นี่
แอปโหนดเว็บนี้เป็นแอปตอบสนองเว็บที่ให้บริการโดย Express มันเป็น dockerized แล้วเผยแพร่บน AWS Elastic Beanstalk
ก่อนอื่นให้สร้างแอป React ชื่อ 'My-App' และเข้าไปในโฟลเดอร์:
npx create-react-app my-app
cd my-app
จากนั้นติดตั้งและบันทึกด่วน:
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
และเรียกใช้ Express เพื่อให้บริการแอป React:
node server.js
หากต้องการใช้ Docker ลงทะเบียนบน Docker และติดตั้ง Docker และ/หรือ Docker Desktop ตามต้องการ เมื่อการติดตั้ง Docker เสร็จสมบูรณ์ให้สร้างไฟล์ชื่อ 'DockerFile' โดยเรียกใช้:
touch Dockerfile
ใน DockerFile ระบุภาพที่คุณต้องการสร้างจาก หมายเลขรูปภาพล่าสุดสำหรับแอป Node.js มีอยู่ใน Hub Docker
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 สิ่งนี้จะป้องกันโมดูลโหนดท้องถิ่นและบันทึกการดีบักไม่ให้คัดลอกลงในอิมเมจนักเทียบท่า ภาพหน้าจอของ .dockerignore: 
ในการสร้างอิมเมจนักเทียบท่าให้เรียกใช้คำสั่งต่อไปนี้:
docker build -t <your username>/<your app name> .
ในการเรียกใช้ภาพที่สร้างขึ้นบนพอร์ต 49160 ให้เรียกใช้:
docker run -p 49160:8080 -d <your username>/<your app name>
ธง -p เปลี่ยนเส้นทางพอร์ตสาธารณะไปยังพอร์ตส่วนตัวภายในคอนเทนเนอร์
เพื่อยืนยันว่าภาพกำลังทำงานรัน:
docker ps
ในการปรับใช้อิมเมจนักเทียบท่าระยะไกลไปยัง AWS Elastic Beanstalk ให้กดรูปภาพไปที่ Docker Hub:
docker push <your username>/<your app name>:latest
เรียนรู้เพิ่มเติม
สำหรับการอ้างอิง Node.js ได้เผยแพร่คำแนะนำเกี่ยวกับวิธีการเชื่อมต่อแอป Node.js ที่นี่
หากคุณไม่เคยใช้ AWS Elastic Beanstalk มาก่อนคุณสามารถเริ่มต้นได้โดยการอ่านเอกสาร
สร้างไฟล์ dockerrun.aws.json ดังต่อไปนี้:
{
"AWSEBDockerrunVersion": "1",
"Image": {
"Name": "your-docker-username/repo-name",
"Update": "true"
},
"Ports": [
{
"ContainerPort": "8080"
}
]
}
ซึ่งรวมถึงข้อมูลเกี่ยวกับภาพนักเทียบท่าระยะไกลที่ Elastic Beanstalk ควรดึง จากนั้นเราจะสร้างแอป Elastic Beanstalk และอัปโหลดไฟล์นี้
หากต้องการตั้งค่าแอปของคุณบน Elastic Beanstalk ก่อนอื่นให้ไปที่คอนโซล Beanstalk Elastic Beanstalk -> แอปพลิเคชันและคลิกที่ "สร้างแอปพลิเคชันใหม่"
ป้อนชื่อแอปพลิเคชันของคุณ: 
คลิกที่ "สร้างสภาพแวดล้อมใหม่" สำหรับแอพที่คุณเพิ่งสร้าง: 
เลือก 'สภาพแวดล้อมเว็บเซิร์ฟเวอร์' สำหรับแอพนี้: 
สำหรับ 'แพลตฟอร์ม' เลือก 'Docker' และสาขาแพลตฟอร์มและเวอร์ชันตามที่คุณต้องการ
สำหรับ 'รหัสแอปพลิเคชัน' เลือก 'อัปโหลดรหัสของคุณ' และอัปโหลด dockerrun.aws.json ที่คุณเพิ่งสร้าง: 
นำทางไปที่ 'กำหนดค่าตัวเลือกเพิ่มเติม' และเลือกการกำหนดค่าที่ตั้งไว้ล่วงหน้าหรือสร้างการกำหนดค่าที่มีโหลดบาลานซ์ 
แอพจะถูกสร้างขึ้นในอีกสักครู่และจะถูกนำไปใช้ตามที่อยู่ ElasticBeanstalk: 
เรียนรู้เพิ่มเติม
สำหรับการอ้างอิง AWS มีเอกสารเกี่ยวกับการปรับใช้คอนเทนเนอร์ Docker บน AWS Elastic Beanstalk
คุณสามารถซื้อที่อยู่โดเมนบนแพลตฟอร์มใด ๆ ตามที่คุณต้องการ ตัวอย่างนี้จะสาธิตวิธีการเชื่อมต่อแอปที่ปรับใช้ของคุณกับที่อยู่ที่ซื้อจาก Google โดเมน
ก่อนอื่นเลือกชื่อโดเมนที่คุณชอบและซื้อ
ที่อยู่โดเมนจะแสดงในบัญชี Google Domains ของคุณหลังการซื้อ ไปที่ 'DNS' บนเมนูด้านซ้ายและเลื่อนไปที่ 'บันทึกทรัพยากรที่กำหนดเอง'
เพิ่มบันทึก CNAME ใส่ในที่อยู่แอป Elastic Beanstalk ของคุณเป็น 'ข้อมูล' และ 'www' เป็น 'ชื่อ': 
นอกจากนี้เรายังต้องเพิ่มเซิร์ฟเวอร์ชื่อที่กำหนดเองในหน้า 'DNS' เราจะทำสิ่งนี้ในส่วน "ชื่อเซิร์ฟเวอร์" 
ตาม AWS 'โซนโฮสต์บอกเส้นทาง 53 วิธีตอบคำถาม DNS สำหรับโดเมน' ก่อนอื่นสร้างโซนโฮสต์บน AWS Route 53
นำทางไปยังเส้นทาง 53 ในคอนโซล AWS จากนั้นไปที่ 'โฮสต์โซน'
คลิกที่ 'สร้างโซนโฮสต์' และป้อนที่อยู่โดเมนที่คุณเพิ่งซื้อ: 
โซนโฮสต์จะถูกสร้างขึ้น: 
คัดลอก 'ค่า' ที่แสดงรายการสำหรับประเภท 'ns' ทีละหนึ่งไปยัง 'เซิร์ฟเวอร์ชื่อที่กำหนดเอง' ในโดเมน Google: 
โปรดสังเกต ว่าการเปลี่ยนแปลงที่เกิดขึ้นในโดเมน Google อาจใช้เวลานานถึง 48 ชั่วโมงในการมีผล
ในการตั้งค่า HTTPS เราควรได้รับใบรับรอง SSL ใน AWS และเชื่อมโยงไปยังที่อยู่โดเมน
