docker-composeで立ち上げて、nginxでリバースプロキシしてHTMLを書き換えてHello WorldをCrazy Worldにする

はじめに

VirtualBoxでUbunts上のnginxでリバースプロキシしてHTMLを書き換えてHello WorldをCrazy WorldにするのDockerバージョンです。

ソースコードは Github に置いておきます。
ソースコード

やったこと

nginxで立ち上げたhttp://localhost:3000にnodeで立ち上げたhttp://localhost:8080/のHTMLを書き換えて表示させる

node.jsの公式を参考にDockerでnodeを立ち上げ

cf.Node.js Web アプリケーションを Docker 化する

.
├── Dockerfile
├── docker-compose.yml
├── conf.d
│   └── nodejs.conf
└── src
    ├── hello.html
    ├── node_modules
    ├── package-lock.json
    ├── package.json
    └── server.js

Dockerfile

FROM node
ADD  src/ /usr/src
WORKDIR /usr/src
RUN npm install
EXPOSE 8080
ENTRYPOINT ["npm","start"]

とりあえずdocker-composeで立ち上げてみる

docker-compose.yml

version: '3'
services:
  node:
    build: .
    ports:
      - "8080:8080"

http://localhost:8080/

docker-composeにまとめる

docker-compose.yml

version: '3'
services:
  node:
    image: node
    volumes:
      - ./src/:/src
    working_dir: /src
    ports:
      - "8080:8080"
    command: [sh, -c, npm install && npm start]

とりあえずNginx立ち上げ

docker-compose.yml

version: '3'
services:
  nginx:
    image: nginx
    # build: .
    ports:
      - "3000:80"

http://localhost:3000/にアクセス

リバースプロキシ設定

docker-compose.yml

/etc/nginx/conf.d 以下に設定ファイルを置くと読み込んでくれるのでマウントする
Nginxで設定するためにhostnameを指定する

docker-compose.yml

version: '3'
services:
  nginx:
    image: nginx
    # build: .
    ports:
      - "3000:80"
    volumes:
      - "./conf.d/:/etc/nginx/conf.d"
    links:
      - node
  node:
    image: node
    # build: .
    volumes:
      - ./src/:/src
    working_dir: /src
    # Nginxで設定するためにhostnameを指定する
    hostname: node
    ports:
      - "8080:8080"
    command: [sh, -c, npm install && npm start]

Nginx設定

sub_filter '置き換え元文字' "置き換え後文字" ;

conf.d/nodejs.conf

server {
    listen 80;
    server_name _;
    client_max_body_size 10M;
    location / {
        sub_filter_once off;
        sub_filter 'Hello' 'Crazy' ;
        sub_filter '</head>' "<script>alert('Crazy World')</script></head>" ;
        sub_filter 'nginx' 'Crazy' ;
        # docker-compose.ymlで指定したhostnameを使う
        proxy_pass   http://node:8080;
    }
}

再びhttp://localhost:3000/にアクセス

"Hello World"が"Crazy World"に書き換えられて表示される