Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブnginx

2018年5月21日 By KD コメントを書く

Heroku上にNginxでリバースプロキシを構築する方法

Heroku上にNginxでリバースプロキシを構築する方法

Heroku上にオリジナルのアプリケーションを構築したとして、それを公開するにはリバースプロキシを経由するのが一般的です。今回はHeroku上に作った自分のアプリケーションへのリバースプロキシをNginxで構築する方法を紹介します。

リバースプロキシ(Reverse proxy)とは

リバースプロキシとは、簡単に言ってしまえばエンドユーザとアプリケーション(バックエンド)の間を仲介するサーバーの事です。なぜそんなサーバが必要なのかと言えば、ロードバランサーとして利用することで負荷分散(バックエンドのスケールアウト)を可能にしたり、冗長化されたノードの一つに問題が発生した時にうまく他のノードに割り振ったり(可用性)、メンテナンスの時にバックエンドへのアクセスを止めたり、キャッシュしたり(性能)、SSL対応を共通化したり、といった事を実現するためです。

少々小難しい表現なので、少し違った視点で例えると、

Webデザイナーにとってのワイヤーフレームに少し似ています。(アイデアとHTMLの間)

アプリケーションエンジニアにとってのインターフェースに対する設計に少し似ています。(定義と実装の間)

お客さんとエンジニアの間にいる交渉役のリーダーやシニアエンジニアに似ています。(お客さんとエンジニアの間)

平社員の愚痴を聞き、部長の意向を聞く、中間管理職に似ています。(平社員と部長の間)

どれも間に無いと困りますね。いつもお疲れ様です。逆に混乱した人はWikipediaのリバースプロキシの説明を見てください。それよりは分かり安く説明したつもりですが。

ということで、今回はすでにHeroku上にオリジナルのアプリケーションを構築済みである前提で、さらにNginxを使ったリバースプロキシをHeroku上に構築する方法を紹介します。

Heroku上で動くNginxのリバースプロキシの設定

事前にDockerコマンドとHerokuコマンドは使えるように準備しておいて下さい。

それでは、やっていきましょう!

必要なフォルダとファイルを作る

今回用のプロジェクトを作りましょう。

$ mkdir herokuapp-proxy
$ cd herokuapp-proxy
$ touch nginx.conf.erb
$ touch boot.sh
$ touch Dockerfile
$ touch docker-compose.yml

この時点で全体像が見えますね。

nginx.conf.erbを作る

通常Nginxの設定ファイルはnginx.confですが、RubyのERBファイルにします。理由は、Herokuがポートを自動で割り振る仕様になっているため、コンテナ起動時にHerokuの環境変数PORTを参照して設定する必要があるためです。ついでにHerokuに設定した自分の環境変数も参照できるので便利です。

daemon off;
worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;

http {

  upstream heroku_app {
    server {your-webapp-yyyyy}.herokuapp.com;
  }

  server{
    listen <%= ENV["PORT"] %>;
    server_name _;

    location ^~ / {
      proxy_pass http://heroku_app;

      proxy_redirect   off;
      proxy_set_header Host               {your-webapp-yyyyy}.herokuapp.com;
      proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;
      proxy_set_header X-Real-IP          $remote_addr;
      proxy_set_header X-Forwarded-Host   $http_host;
      proxy_set_header X-Forwarded-Server $http_host;
      proxy_set_header Connection         '';
      proxy_http_version 1.1;

    }

  }

}

{your-webapp-yyyyy}のところは、プロキシを接続するHerokuアプリのドメインに置き換えて下さい。

boot.shを作る

次にコンテナ実行時のコマンドをシェルスクリプトにします。

#!/bin/sh

# build
/usr/bin/erb /usr/local/openresty/nginx/conf/nginx.conf.erb > /usr/local/openresty/nginx/conf/nginx.conf

# start nginx
/usr/local/openresty/nginx/sbin/nginx

単にERBファイルをビルドして、Nginxを起動しているだけです。

Dockerfileを作る

続いてNginxのDockerファイルを作ります。今回はopenrestyのイメージを使います。これを使うとLuaが最初から使えるので便利です。ただ、今回はLuaは使わないので、普通のNginxの公式イメージでも問題ありません。

FROM openresty/openresty:1.13.6.1-1-alpine

ENV PATH $PATH:/usr/sbin/

COPY  nginx.conf.erb /usr/local/openresty/nginx/conf/nginx.conf.erb

COPY boot.sh /boot.sh
RUN chmod +x /boot.sh

RUN apk update \
  && apk add ruby

CMD ["/boot.sh"]

Herokuアプリとして登録する

herokuapp-proxyをHerokuに登録しましょう。

$ heroku container:login
$ heroku create
Creating app... done, ⬢ your-proxyapp-xxxxx

この時にnginx.conf.erbにオリジナルの環境変数(今回で言うところのNGINX_WORKERS)を書いている場合はheroku config:setコマンドで必要に応じて設定しましょう。

docker-compose.ymlを作る

HerokuのDockerレジストリにPushするために、Docker ComposeのYAMLを作りましょう。

version: '3'

services:
  proxy:
    image: registry.heroku.com/{your-herokuapp-xxxxx}/web:0.1.0
    build: .

{your-herokuapp-xxxxx}にはこのプロキシのドメインに置き換えて下さい。

HerokuにPushする

最後にイメージを作って、HerokuにPushすれば完了です。もちろん{your-herokuapp-xxxxx}はこのプロキシのドメインに置き換えて下さい。

$ docker-compose build --no-cache proxy
$ docker push registry.heroku.com/{your-herokuapp-xxxxx}/web:0.1.0

以上でリバースプロキシが構築できました!

追記(container:release対応)

Container RegistryにDockerイメージをPushした後に、Releaseコマンドが必要になりました。詳しくは以下の記事を参照して下さい。

Heroku Container Registryのcontainer:push後のcontainer:releaseの対応方法

最後に

いかがでしたか?これでHeroku上でNginxでリバースプロキシを構築できるようになったと思います。小さいサービスであればDNS Service Discovery(Herokuの中の人がやたらとセールスしてるやつ)を使わなくてもこれで十分です。では。

カテゴリ : 技術 Tips & Tutorials タグ : heroku, nginx, proxy

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • FacebookログインのJavascriptのSDKをサクッと試す方法
    FacebookログインのJavascriptのSDKをサクッと試す方法
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • PythonでWebスクレイピング入門(Scrapy+Selenium編)
    PythonでWebスクレイピング入門(Scrapy+Selenium編)
  • [tips][bat] バッチで明日の日付を計算する。
    [tips][bat] バッチで明日の日付を計算する。

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes