å°å ¥ïŒç°ãªãæè¡ã¹ã¿ãã¯ã®çµ±åãšãã課é¡
ãããŸã§ã®èšäºã§ãããã³ããšã³ãã« Next.js (TypeScript/Node.js)ãããã¯ãšã³ãã« Django (Python) ãæ¡çšããAPI 飿ºã§åå®å šãªã¢ãã³ãª Web ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããéçã解説ããŠããŸããã
ããããããã§äžã€ã®å€§ããªèª²é¡ãæ®ããŸããããã¯ã**ãPython ãš Node.js ãšãããåäœç°å¢ãå šãç°ãªã 2 ã€ã®ããã»ã¹ããã©ã®ããã«äžã€ã®ãµãŒããŒã§å®å®çšŒåããããã**ãšããç¹ã§ãã
ç¬èª PHP MVC æä»£ã¯ Apache ãå šãŠãåŠçããŠããŸããããã¢ãã³ãª Full-Stack ã§ã¯ãããããå°çšã®ããã»ã¹ç®¡çãå¿ èŠã«ãªããŸããæ¬èšäºã§ã¯ããã®èª²é¡ã解決ããããã«å°å ¥ãã Nginx ãš PM2 ãæ žãšãããã«ãããã»ã¹ç°å¢ã®æ§ç¯æ¹æ³ã解説ããŸãã
第1ç« ïŒãªãããã»ã¹ç®¡çãå¿ èŠãªã®ãïŒ
1. ãµãŒããŒã®åœ¹å²ã®åé¢
æ§ PHP ã·ã¹ãã ã§ã¯ãWeb ãµãŒããŒïŒApacheïŒãéçãã¡ã€ã«é ä¿¡ããªã¯ãšã¹ãåä»ãPHP å®è¡ç°å¢ãšã®é£æºãå šãŠæ ã£ãŠããŸãããããããã¢ãã³ãªæ§æã§ã¯åœ¹å²ãåé¢ããŸãã
- ããã³ããšã³ãïŒNext.jsïŒ: ãµãŒããŒãµã€ãã¬ã³ããªã³ã° (SSR) ã API ã«ãŒãã£ã³ã°ãæ ã Node.js ããã»ã¹ã
- ããã¯ãšã³ãïŒDjangoïŒ: ããŒã¿åŠçãš API é ä¿¡ãæ ã Python ããã»ã¹ã
ãããã®ããã»ã¹ã¯ããããããç¬ç«ããã¢ããªã±ãŒã·ã§ã³ãšããŠåäœãããããããã»ã¹ãããŠã³ããå Žåã®åèµ·åãããªãœãŒã¹ã®å¹ççãªåé ãè¡ãããã®ã管ç人ããå¿ èŠã«ãªããŸãã
2. Nginx ãš PM2 ã®æ¡çšçç±
ãã®ç®¡ç圹ãšããŠãç§ãã¡ã¯ä»¥äžã® 2 ã€ã®ããŒã«ãæ¡çšããŸããã
- Nginx (ãªããŒã¹ãããã·/éçãã¡ã€ã«é
ä¿¡):
- å€éšããã®ãªã¯ãšã¹ããæåã«åãä»ããé©åãªããã¯ãšã³ãããã»ã¹ïŒNext.js ãŸã㯠DjangoïŒãžæ¯ãåããäº€éæŽç圹ïŒãªããŒã¹ãããã·ïŒã
- CSS ãç»åãªã©ã®éçãã¡ã€ã«é ä¿¡ãé«éã«è¡ããããã¯ãšã³ãã®è² è·ã軜æžã
- PM2 (ããã»ã¹ç®¡çãããŒãžã£ãŒ):
- Node.js ããã»ã¹ïŒNext.jsïŒãç£èŠããã¯ã©ãã·ã¥ããéã«èªåã§åèµ·åãããã
- ãã«ãã³ã¢ CPU ãå¹çãã䜿ãããã®**ã¯ã©ã¹ã¿ãªã³ã°ïŒå€éèµ·åïŒ**ã容æã«å®çŸã
Python åŽã® Django ããã»ã¹ãåæ§ã« Gunicorn ã®ãã㪠WSGI ãµãŒããŒã§ç®¡çããŸããããã®äºã€ïŒNginx ãš PM2ïŒããç°ãªãæè¡ã¹ã¿ãã¯ã®å®å®çšŒåã®éµãšãªããŸãã
第2ç« ïŒå®è·µïŒãã«ãããã»ã¹ç°å¢ã®æ§ç¯æé
1. Next.js (Node.js) ããã»ã¹ã®æ°žç¶åãšã¯ã©ã¹ã¿ãªã³ã°ïŒPM2ïŒ
Next.js ã¢ããªã±ãŒã·ã§ã³ãæ¬çªç°å¢ã§èµ·åããéã¯ãåã« npm start ããã®ã§ã¯ãªããPM2 ãçšããŠç®¡çããŸãã
- ã€ã³ã¹ããŒã«ãšèšå®: ãµãŒããŒã« PM2 ãã€ã³ã¹ããŒã«ãã
ecosystem.config.jsã®ãããªèšå®ãã¡ã€ã«ãäœæããŸãã - ã¯ã©ã¹ã¿ã¢ãŒãã§ã®èµ·å:
- èªååèµ·åã®ç¢ºä¿: PM2 ã¯äžèšã®èšå®ã«ãããããã»ã¹ãã¡ã¢ãªäžè¶³ãªã©ã§ããŠã³ããå Žåã«ãå³åº§ã«æ°ããããã»ã¹ãç«ã¡äžããŸããããã«ããããµãŒãã¹ã®äžæãæå°éã«æããããšãå¯èœã«ãªããŸããã
# Next.jsã¢ããªã®èµ·åèšå®ïŒäŸïŒ
module.exports = {
apps : [{
name: "next-app",
script: "node_modules/next/dist/bin/next",
args: "start",
instances: "max", # CPUã³ã¢æ°ã«å¿ããŠèªåã§ããã»ã¹æ°ãæå€§å
exec_mode: "cluster", # ã¯ã©ã¹ã¿ã¢ãŒãã§èµ·åããè² è·åæ£ãPM2ã«ä»»ãã
watch: false
}]
};
pm2 start ecosystem.config.js
2. Nginx ã«ãããªã¯ãšã¹ãã®äº€éæŽçïŒãªããŒã¹ãããã·ïŒ
次ã«ãå€éšããã®ãªã¯ãšã¹ãã PM2 ã§ç®¡çãããŠãã Next.js ããPython åŽã® Django ãžé©åã«æ¯ãåãã Nginx ã®èšå®ãè¡ããŸãã
Nginx ã¯ããµãŒããŒã®ããŒã 80ïŒHTTPïŒã§ãªã¯ãšã¹ããåãä»ãã以äžã®æ¯ãåããè¡ããŸãã
- Next.js ãžã®ã«ãŒãã£ã³ã°:
- å
šãŠã® Web ããŒãžã®è¡šç€ºãªã¯ãšã¹ãïŒäŸ:
/ã/aboutïŒã¯ãNext.js ãåŸ æ©ããŠããããŒããžè»¢éïŒãããã·ïŒããŸããNext.js ã HTML ãçæãããã®çµæã Nginx ãã¯ã©ã€ã¢ã³ãã«è¿ããŸãã
- å
šãŠã® Web ããŒãžã®è¡šç€ºãªã¯ãšã¹ãïŒäŸ:
- Django ãžã®ã«ãŒãã£ã³ã°:
- ç¹å®ã® API ãã¹ïŒäŸ:
/api/v1/dataïŒãžã®ãªã¯ãšã¹ãã¯ãPython åŽã® Django ãåŸ æ©ããŠããããŒãïŒé垞㯠Gunicorn çµç±ïŒãžè»¢éããŸããDjango ã¯ããŒã¿åŠçãè¡ããJSON ãè¿ããŸãã
- ç¹å®ã® API ãã¹ïŒäŸ:
Nginx
server {
listen 80;
server_name example.com;
# Django APIãžã®ã«ãŒãã£ã³ã°èšå®
location /api/ {
proxy_pass http://127.0.0.1:8000; # Django/Gunicornã®ããŒã
# ãã®ä»ã®ãããã·èšå®...
}
# Next.jsãžã®ã«ãŒãã£ã³ã°èšå® (APIãã¹ä»¥å€)
location / {
proxy_pass http://127.0.0.1:3000; # Next.js/PM2ã®ããŒã
# ãã®ä»ã®ãããã·èšå®...
}
}
ãã®èšå®ã«ããããŠãŒã¶ãŒã¯åäžã® URL ã«ã¢ã¯ã»ã¹ããã ãã§ãè£åŽã§ç°ãªã 2 ã€ã®ããã»ã¹ãå調ããŠåäœããå®å®ãããµãŒãã¹ãå©çšã§ããããã«ãªããŸãã
ãŸãšãïŒå®å®çšŒåãããä¿¡é Œã®åºç€
1. Nginx ãš PM2 å°å ¥ã®ææ
Nginx ãš PM2 ã®å°å ¥ã¯ããã®ã¢ãã³ãª Full-Stack ç§»è¡ãããžã§ã¯ãã«æ±ºå®çãªå®å®æ§ããããããŸããã
- èé害æ§ã®åäž: PM2 ã®èªååèµ·åãšã¯ã©ã¹ã¿ãªã³ã°æ©èœã«ãããNode.js ããã»ã¹ãäžæçã«äžå®å®ã«ãªã£ãŠããµãŒãã¹å šäœã®ããŠã³ãé²ããããã«ãªããŸããã
- ããã©ãŒãã³ã¹ã®åäž: Nginx ãéçãã¡ã€ã«é ä¿¡ãé«éã§æ ããããã¯ãšã³ãã® CPU ãæ¥åããžãã¯ã®å®è¡ã«éäžãããããšãå¯èœã«ãªããŸããã
- ã·ã³ãã«ãªæ¡åŒµæ§: ããã³ããšã³ããšããã¯ãšã³ãã®ããŒãçªå·ã倿Žããã ãã§ãNginx ã®èšå®ãã¡ã€ã«å ã§ã«ãŒãã£ã³ã°ã倿Žã§ããæ¡åŒµæ§ãæ ä¿ãããŸããã
2. èªèµ°åã§ç¯ãã€ã³ãã©ã®éèŠæ§
ãã®ã€ã³ãã©æ§ç¯ã¯ãç§ãç¬åŠã§ Web ãµã€ããéçšããŠããçµéšããåŸã**ãå®å®çšŒåãããä¿¡é Œã®åºç€ã§ããã**ãšããæèšã«åºã¥ããŠããŸãã
åãªãã³ãŒãã£ã³ã°ã¹ãã«ã ãã§ãªãã**ãäœã£ããã®ãå®å®ããŠãŠãŒã¶ãŒã«å±ããã**ãšããéçšã»ã€ã³ãã©ã®ç¥èãšå®è·µåã¯ãããã®ãšã³ãžãã¢ãšããŠäžå¯æ¬ ãªèœåã§ããä»åã®ãã«ãããã»ã¹ç°å¢ã®æ§ç¯ã¯ããã®ç¥èãšå®è·µåã蚌æãããã®ã§ãã
ä»åŸã®èšäºã§ã¯ããã®å®å®ããç°å¢ãåºç€ãšããŠãããã³ããšã³ãã®èŠãç®ã®æ¹åããããŒã¿ããŒã¹ã®å ·äœçãªãã¥ãŒãã³ã°è¡ã«ã€ããŠè§£èª¬ããŠããäºå®ã§ãã


ã³ã¡ã³ã