มา Deploy Angular | React | Vue บน Docker กัน

เริ่มกันเลย!!!

1. Angular

1.1 สร้าง Project

npm install -g @angular/cli //ลง cli ของ angular
ng new angular-app //สร้าง project ผ่าน cli
cd angular-app //เข้า project

1.2 นำ scripts ng build — output-path=dist — source-map=false ไปใส่ไว้ตรง scripts ของ build ของไฟล์ package.json

{  
  ...            
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --output-path=dist",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
}
  ...
}

— output-path=dist คือการกำหนด path ไฟล์ build

1.3 copy ด้านล่างนี้ไปใส่ในไฟล์ nginx.conf

line 2 listen port 80
line 3 เซ็ต server name localhost
line 5 เซ็ต path location /
line 6 เซ็ต root /usr/share/nginx/html เพื่อนำเอาของที่อยู่ข้างในมาแสดงผล

1.4 copy ด้านล่างนี้ไปใส่ในไฟล์ Dockerfile

STAGE 1: build project
line 3 กำหนด path directory /usr/src/app
line 4 COPY package.json
line 5 install package
line 7 build project

STAGE 2: run project
line 11 copy nginx.conf จาก state 1 มาไว้ที่ state 2 ที่ directory /etc/nginx/conf.d/default.conf
line 12 copy dist จาก state 1 มาไว้ที่ state 2 ที่ directory /usr/share/nginx/html
line 14 คำสั่ง run project

โครงสร้าง project ก็จะตามนี้

1.5 docker build

docker build -f Dockerfile -t angular-app:v1 . //build docker image

1.6 docker run

docker run -d -p 3001:80 angular-app:v1 //docker run

เข้าไป http://localhost:3001 จะแสดงผลตามนี้

เป็นอันเสร็จแล้วกับ deploy angular เบื้องต้น

2. React

2.1 สร้าง project

npx create-react-app react-app //สร้าง project
cd react-app //เข้า project

2.2 copy ด้านล่างนี้ไปใส่ในไฟล์ nginx.conf

line 2 listen port 80
line 3 เซ็ต server name localhost
line 5 เซ็ต path location /
line 6 เซ็ต root /usr/share/nginx/html เพื่อนำเอาของที่อยู่ข้างในมาแสดงผล

2.3 copy ด้านล่างนี้ไปใส่ในไฟล์ Dockerfile

STAGE 1: build project
line 3 กำหนด path directory /usr/src/app
line 4 COPY package.json
line 5 install package
line 7 build project

STAGE 2: run project
line 11 copy nginx.conf จาก state 1 มาไว้ที่ state 2 ที่ directory /etc/nginx/conf.d/default.conf
line 12 copy build จาก state 1 มาไว้ที่ state 2 ที่ directory /usr/share/nginx/html
line 14 คำสั่ง run project

โครงสร้าง project ก็จะตามนี้

2.4 docker build

docker build -f Dockerfile -t react-app:v1 . //docker build image

2.5 docker run

docker run -d -p 3002:80 react-app:v1 //docker run

เข้าไป http://localhost:3002 จะแสดงผลตามนี้

เป็นอันเสร็จแล้วกับ deploy react เบื้องต้น

3. Vue

3.1 สร้าง project

npm install -g vue-cli //ลง cli ของ vue
vue init webpack vue-app //สร้าง project ผ่าน cli
cd vue-app  //เข้า project

3.2 copy ด้านล่างนี้ไปใส่ในไฟล์ nginx.conf

line 2 listen port 80
line 3 เซ็ต server name localhost
line 5 เซ็ต path location /
line 6 เซ็ต root /usr/share/nginx/html เพื่อนำเอาของที่อยู่ข้างในมาแสดงผล

3.3 copy ด้านล่างนี้ไปใส่ในไฟล์ Dockerfile

STAGE 1: build project
line 3 กำหนด path directory /usr/src/app
line 4 COPY package.json
line 5 install package
line 7 build project

STAGE 2: run project
line 11 copy nginx.conf จาก state 1 มาไว้ที่ state 2 ที่ directory /etc/nginx/conf.d/default.conf
line 12 copy dist จาก state 1 มาไว้ที่ state 2 ที่ directory /usr/share/nginx/html
line 14 คำสั่ง run project

โครงสร้าง project ก็จะตามนี้

3.4 docker build

docker build -f Dockerfile -t vue-app:v1 . //docker build image

3.5 docker run

docker run -d -p 3003:80 vue-app:v1 //docker run

เข้าไป http://localhost:3003 จะแสดงผลตามนี้

เป็นอันเสร็จแล้วกับ deploy vue เบื้องต้น