ตัวอย่าง Docker compose ของ Angular

| Angular NGINX Docker | 66 | 53 วันที่แล้ว
สวัสดีคับ บทความนี้ผมเอาตัวอย่างของ Docker compose ของ Angular มาให้เผื่อใครสนใจนำไปใช้กันคับ

ซึ่งเป็นตัวอย่างที่เรา build angular แล้ว เราจะนำ static file ไปไว้ใน nginx แล้ว set path มา โดยทุกอย่างจะทำบน docker คับ

เราไปดู Dockerfile กันก่อน ตามนี้คับ

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf
จากนั้นใน docker-compose ก็ประมาณนี้คับ
version: '2'

services:
    reverseproxy:
        build: .
        ports:
            - 8080:8080
            - 8081:8081
            - 80:80
        volumes:
            - /root/bookedsell-web/dist/bookedsell:/data
        restart: always

    nginx:
        depends_on:
            - reverseproxy
        image: nginx:alpine
        restart: always

    apache:
        depends_on:
            - reverseproxy
        image: httpd:alpine
        restart: always
จากโค้ดเราจะ map volumes จาก dist/bookedsell ไปไว้ที่ /data คับ จากนั้นเราก็เซ็ต nginx ประมาณนี้คับ
server {
        listen 80;
        server_name bookedsell.com www.bookedsell.com;

        root /data;
        try_files $uri $uri/ /index.html;
        index index.html;

        location / {
            root /data;
            try_files $uri $uri/ /index.html;
            index index.html;
        }
		
		location ~ \.css {
			add_header  Content-Type    text/css;
		}
		location ~ \.js {
			add_header  Content-Type    application/x-javascript;
		}

        location /service {
            proxy_pass http://xxx.xxx.xxx.xxx:xxx/service;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
    }
จากโค้ดทั้งหมด พอเราทำโปรเจ็ค angular เสร็จแล้ว เราก็จะใช้ build แล้วจะทำให้มันอยู่ใน dish folder จากนั้นใน docker เราก็จะ start nginx แล้วทำการ config แบบ static file แล้วทำการ set root ที่ /data จากนั้น เวลายิง api ผมจะทำให้มัน reverse ไปยัง ip โดยตรง ตรง location เวลาเป็นไฟล์ .css หรือ .js ให้มันเซ็ต content type ให้ตรงด้วยคับ เพียงแค่นี้เราก็ได้แล้ว
comments

[1]
AGI
58 D
[1]
Adobe-PDF
1162 D
[1]
Android
1053 D
[2]
Angular
36 D
[40]
Animal
1146 D
[1]
Apache
1162 D
[1]
[4]
[2]
[1]
[10]
CMS-Joomla
1163 D
[2]
CMS-SMF
1163 D
[1]
[4]
[1]
[3]
[1]
Database
1162 D
[4]
[1]
DeAI
23 D
[1]
DeData
23 D
[1]
DeFi
23 D
[2]
Docker
53 D
[2]
[1]
Forex
20 D
[1]
Fruit
1147 D
[1]
General
44 D
[2]
Git
949 D
[6]
HTML
53 D
[1]
Health
48 D
[1]
Housework
1151 D
[2]
IT
1143 D
[2]
Imacro
1163 D
[20]
Java
25 D
[1]
Java-Web
1053 D
[2]
[2]
MQL5
975 D
[3]
MakeMoney
948 D
[18]
[1]
[1]
Maven
947 D
[5]
[1]
Mobile
1160 D
[2]
NGINX
36 D
[2]
NodeJs
53 D
[1]
Oracle
53 D
[3]
Physics
944 D
[4]
PugJS
949 D
[2]
React
958 D
[132]
Science
1145 D
[2]
[5]
Spring
36 D
[12]
[7]
[2]
[1]
[4]
Ubuntu
1113 D
[1]
WebLogic
1144 D
[4]