ApacheポートフォワーディングでNuxt×Golang

はじめに

このサイトはフロント側をNuxt4、バックエンド側をGolang(Gin)で作成しています。

(ポートフォリオサイトの方にGitHubへのコードも載せています。)

本当はApacheではなくNginxなどを使った方がいいんだと思いますが、今回自分の構成ではApache上にそれぞれデプロイしていきます。

そのため、同じドメインで以下のように振り分けたくなりました。

• フロント(Nuxt)をポート3000で起動し、example.comにアクセスしたらポート3000に転送
• API(Gin)をポート3001で起動し、example.com/api/XXX にアクセスしたらポート3001に転送

ポートフォワーディングを使って振り分ける

上記のような振り分けをする時に便利なのがポートフォワーディング(ポート転送)という機能。
 sslで対応する場合はssl.confに以下のように記載します。

RewriteEngine On

ProxyPass /api http://localhost:3001/api
ProxyPassReverse /api http://localhost:3001/api

ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/copy_all

解説

まず、RewriteEngine OnでApacheのmod_rewriteモジュールを有効にします。
(※ このモジュールを使用することで、ポートフォワーディング以外にも正規表現を使ったリダイレクトなどが行える等汎用性が高いので、現場によっては既に設定が入っている可能性もあります。
場合によっては設定が重複しないようあらかじめファイル内を検索した上で追記してください。)

ProxyPass 転送元 転送先 とProxyPassReverse 転送元 転送先を記載することで、指定のURLでアクセスした際に、転送先のポートに遷移させることが可能になります。
（今回なら、http://example.com/api/XXXへのアクセスをhttp://localhost:3001/apiに遷移させます。）

注意点

地味な詰みポイントとして、Apacheの ProxyPassは記述した上から順に実行されます。
以下のようにルートパスを最初に書いてしまうと、すべてのページがNuxt側に転送されてしまい/apiにアクセスしてもGolang側に転送されません。(1敗)

ProxyPass / http://localhost:3000/copy_all

そのため、URLのパスが深いものから順番に記述していくように気を付ける必要があります。