システム開発

Nuxt.jsをSSRモードでHerokuにデプロイして公開する

PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。

開発の手順に関しては以下の記事にて具体的に紹介をしていきました。

また、Heroku+Laravel+MySQLを独自ドメイン(SSL)で公開する【Laravel6+Nuxt.jsで作る管理画面】の記事で、HerokuにLaravelを独自ドメイン(SSL)でデプロイする手順を解説していきました。

この記事ではNuxt.jsをデプロイして、管理画面を公開して使うことが出来るようにする方法をご紹介!

  • Laravelを使って構築をしたい方
  • Webサイト構築の具体的な手法が知りたい方

これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。

最低限やりたいことを決める

まずデプロイの前に、最低限やりたいことを決めておきます。
今回は実際の利用までを想定して以下の要件にしました。

● https://app.example.com/adminで管理画面にアクセスできる
● Cookieの認証機能が正常に動作する
● 管理者ユーザーの追加・編集・削除が問題なく行える

本来はadmin画面にはBasic認証をつけるべきですが、今回の記事では割愛しています。

Herokuを使う理由

前回の記事ではNuxt.jsのデプロイにはFirebaseを使うと記載していましたが、

SSR(Server Side Rendering)の場合はFirebase Hosting以外にFirebase Functionsのデプロイが必要で、
なかなか面倒なので今回は導入を見送りました。

Herokuなら静的ファイルのホスティングとSSR両方を単体で行えるため、Laravelと同じ感覚でデプロイでき、非常にシンプルなので採用しました。

HerokuにNuxt.js用のアプリを作成

まず下記コマンドでNuxt.js用のアプリをHerokuに作成します。

heroku create admin-nuxt-app --buildpack heroku/nodejs

以下のようなアプリが作られていればOKです。

Nuxt.jsをHerokuで動作させる設定を反映

次に下記コマンドを実行してプロダクション環境で動作する設定を反映します。

heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

反映が完了したら、以下の内容のProcfileをルートディレクトリに追加します。

web: nuxt start

このファイルをHerokuにデプロイすれば、Nuxt.jsのサーバーを使ってアプリが起動するようになります。

Nuxt.jsアプリをHerokuへプッシュ

次に下記コマンドでNuxt.jsアプリをHerokuでプッシュします。

git add .
git commit -m 'Add Procfile'
git push heroku master

プッシュが完了したらhttps://[アプリ名].herokuapp.com/admin に以下のような画面が表示されればOKです。

独自ドメインの設定

管理画面の認証に利用しているCookieはサブドメイン間であれば送受信が可能であるため、

前回のLaravelのデプロイ時と同様に、Nuxt.js側も独自ドメインの設定を行います。

Herokuにアプリ用のサブドメインを追加

Settings > Domains の項目から、「Add domain」をクリックすると、以下のような画面が表示されるので、アプリ用のサブドメインを追加します。

以下のような項目が追加されるので、この「DNS Target」の値をCNAMEで各ドメイン事業者のDNSレコードに設定します。

設定が反映されるまで時間がかかるので、待っている間に次の作業を進めてしまいましょう。

SSLの設定

前回のLaravelのデプロイ時と同様に、HobbyプランにアップグレードしてSSLを有効化します。

APIリクエスト先の環境変数を設定(Nuxt.js側)

次に下記コマンドでAPIリクエスト先のエンドポイントを環境変数に設定します。

heroku config:set API_URL=https://api.example.com/api

Nuxt.jsでHerokuの環境変数を利用している場合、再コンパイルが必要になります。
以下コマンドで空プッシュを行うとコンパイルが実行され環境変数の内容が反映されます。

git commit --allow-empty -m "empty commit"
git push heroku master

CORSとCookie用の環境変数を設定(Laravel側)

次に下記コマンドでLaravel側の環境変数を設定します。

heroku config:set CORS_ALLOWED_ORIGIN=https://app.[ドメイン名]
heroku config:set SESSION_DOMAIN=.[ドメイン名]

SESSION_DOMAINはLaravelで異なるサブドメイン間でセッションを維持するために必要な設定です。

この設定が無いとログインした後にリロードすると、
セッションの維持が出来ずログアウトしてしまうため、必ず設定しておきましょう。

サイトを確認

設定が完了したらhttps://app.[ドメイン名]にアクセスしてログインします。

以下の画面のように管理者ユーザーの編集機能が動作していればOKです。

おわりに

今回はNuxt.jsをSSRモードでHerokuにデプロイし、Laravelと連携する所まで行いました。これで開発した内容を一般公開できるようになったかと思います。

本日紹介したようなものを外注してみるのはいかがでしょうか。 dehaソリューションズではオフショア開発によって低コストで迅速な開発をサポートしています。

Laravelに関して詳しくお話を聞きたい方、開発相談や無料お見積りをしたい方はこちらからご気軽にお問い合わせください。

▼ dehaソリューションへの簡単見積もりの依頼はこちら

Mai Tran

Recent Posts

IFS ERPとは?導入前に知っておくべき特徴・業務プロセス・メリットを徹底解説

近年、製造業・建設業・エンジニアリング企業では、複雑化する生産プロセスや高度化する顧客要求に対応するため、ERP(Enterprise Resource Planning)の導入が急速に進んでいます。 ERPとは、企業のさまざまな情報や業務を一元的に管理するための基幹システムの総称であり、経営資源を最適に活用しながら生産性を向上させ、企業競争力を高めるための中心的なツールです。 その中でも、IFS ERPは国際的に高い評価を受けており、特に製造業・設備保守業(EAM)・プロジェクト型産業に強みを持つERPとして知られています。 モジュール構成の柔軟性、ユーザーインターフェイスの使いやすさ、そしてクラウド・オンプレミスの双方に対応できる拡張性を兼ね備え、多様な企業に適応できる点が大きな特徴です。 この記事では、画像資料として提示された「IFS導入サービス」「工場調査プロセス」「GAP分析」「開発プロセス」「アジャイル開発体制」などの情報をもとに、IFS ERPの全体像、導入ステップ、具体的なメリットを総合的に解説します。 IFS導入を検討している企業の方 ERPシステムの比較・理解を進めたい方 製造業の方 これらに当てはまる方におすすめの記事になっております。これを読めばIFS導入について具体的な方法がわかりますよ。 (more…)

4 days ago

TQA(技術品質保証)とは? 開発プロセスにおけるその役割と導入メリット

ソフトウェア開発において、品質の確保はプロジェクト成功の最重要テーマの一つです。 市場のニーズは高度化し、リリースサイクルは短期化し、開発チームの構成は複雑化しています。このような状況の中で注目されているのが TQA(Technical Quality Assurance:技術品質保証) です。 TQAは従来のQAと異なり、単にテスト工程で不具合を検出するだけではなく、開発工程全体の技術的な品質を可視化し改善するという役割を担います。 この記事では、TQAとは何か、その役割から導入メリットまで詳しく解説します。 TQAが気になる方 TQAの開発プロセスが気になる方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばTQAとは何かがわかるのはもちろん、導入メリットもわかりますよ。 (more…)

2 weeks ago

プロジェクト品質管理サービスとは?重要性とプロセスを解説

近年、システム開発・建設・製造・マーケティングなど、あらゆる分野でプロジェクトの複雑化が進んでいます。 市場の変化は速く、顧客の期待値も高まり続けるなか、企業に求められるのは「限られたコストと期間で、高い品質を確保した成果物を提供すること」です。 しかし実際には、品質のばらつき、手戻り、要件の理解不足、工程管理の不徹底などにより、多くのプロジェクトが計画どおりに進まず、結果的にコスト増や納期遅延という課題を抱えています。 こうした背景から注目されているのが プロジェクト品質管理サービス です。専門家による品質管理プロセスの整備・運用支援を通じて、プロジェクト全体の成功確率を高めるサービスとして、大企業から中小企業まで導入が広がっています。 この記事では、プロジェクト品質管理サービスの概要、必要性、導入メリット、サービス内容、実際の運用プロセスまでを詳しく解説します。 品質管理にお悩みの方 プロジェクト品質管理システムに興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事になっています。これを読めば、品質問題で悩んでいる組織やプロジェクトリーダーにとって、具体的な改善ヒントとなる内容がわかりますよ。 (more…)

2 weeks ago

生成AIチャットボットは?従来のチャットボットの違い

近年、企業や教育機関、自治体を中心に「生成AIチャットボット」の導入が一気に広がっています。 ChatGPTをはじめとする大規模言語モデル(LLM)が急速に発展したことで、これまでのチャットボットでは実現できなかった高度な対話や柔軟な問題解決が可能になりました。 しかし、「生成AIチャットボット」と「従来型のチャットボット」は何が違うのか、具体的に説明できる人は意外と多くありません。 本記事では、両者の仕組みや特性、メリット・デメリット、そして導入時のポイントまで分かりやすく解説しています。 生成AIに興味がある方 チャットボットを導入したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AIチャットボットが、従来と比べてどう違うのかが丸わかりですよ。 (more…)

3 weeks ago

AI活用でコーディングが効率化し、開発のスピード3倍アップ

いま、ソフトウェア開発の現場で“静かな革命”が起きています。それは、AIがエンジニアの相棒としてコーディングを支援する時代の到来です。 「AIがコードを書くなんて、まだ先の話」と思われていたのはもう過去のこと。今ではAIが自然言語での指示を理解し、数秒でプログラムを提案・修正してくれるのが当たり前になりました。 その結果、開発スピードが従来の3倍に向上したという事例も続々と報告されています。 この記事では、AIがどのようにしてコーディングを効率化し、開発現場を変えているのかを具体的に解説します。 開発をしたい方 コーディングの効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばコーディングにAIを活用する方法が丸わかりですよ。 (more…)

4 weeks ago

要件定義フェーズをAI活用で解決する7つの問題と解決案

システム開発において最も重要であり、同時に最も難しい工程は何でしょうか。 多くのプロジェクトで共通して挙げられるのが 「要件定義」 です。 要求が曖昧なままプロジェクトが進むと、後工程での手戻りが一気に増え、QCD(品質・コスト・納期)は簡単に崩壊します。 実際に、プロジェクトが失敗する原因の6〜7割は、この初期工程である要件定義に起因すると言われています。それほど、要件定義は重要かつリスクの高いフェーズなのです。 しかし近年、AI技術の急速な進化により、従来の要件定義で「時間がかかる」「認識が揃わない」「情報が不足している」といった課題に対し、新たな解決策が生まれています。 この記事では、要件定義フェーズで頻発する7つの課題を取り上げ、それらをAIを活用してどのように改善できるのかを、具体例を交えて解説します。 要件定義フェーズでお悩みの方 AIを活用して開発効率を上げたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば要件定義で起こりうる問題とそれを解決する方法がわかりますよ。 (more…)

4 weeks ago