システム開発

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

【2026年最新】製造業向けグローバルERPシステムおすすめ10選

製造業を取り巻く環境は、グローバル競争の激化、サプライチェーンの複雑化、そしてデジタル化の加速により大きく変化しています。 その中でERP(統合基幹業務システム)は、単なる業務管理ツールではなく、経営の意思決定を支える中核システムへと進化しています。 特に2026年においては、「クラウド化」「AI活用」「グローバル対応」「生産現場との連携」が重要な選定ポイントとなっています。 ERPは企業の成長戦略そのものに直結するため、自社の規模・業種・将来展望に適したシステム選びが不可欠です。 この記事では、製造業向けの代表的なグローバルERPを10製品厳選し、それぞれの特徴を解説します。 グローバルERPシステムが気になる方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば主要なグローバルERPシステムが丸わかりですよ。 IFS ERP(IFS Cloud) IFS Cloudは、製造業に加えて設備管理やサービス業務まで一体的に管理できる統合ERPです。 特に「アセット集約型製造業」や「プロジェクト型製造」に強みを持っています。…

2 days ago

SQA(ソフトウェア品質保証)とは? 顧客満足度を高める品質維持の役割と重要性

ソフトウェア開発において品質の確保は単なる技術的課題ではなく、企業の信頼性や顧客満足度に直結する重要な要素です。 その中核を担うのがSQA(Software Quality Assurance:ソフトウェア品質保証)です。 SQAとは、開発プロセス全体を通じて品質を計画的に作り込み、維持・向上させるための活動を指します。 この記事ではそんなSQA(ソフトウェア品質保証)について、その概要や役割などを紹介していきます。 SQA(ソフトウェア品質保証)が気になる方 品質管理に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばSQA(ソフトウェア品質保証)の特徴がわかるだけでなく、その重要性が丸わかりですよ。 SQA(ソフトウェア品質保証)とは SQA(ソフトウェア品質保証)とは、ソフトウェア開発において品質を計画的かつ継続的に確保するための活動全般を指します。 単に完成した製品の不具合を検出するテスト工程だけでなく、開発プロセス全体に関与し、品質を作り込む仕組みを整えることが重要な役割です。 具体的には、開発標準の策定や遵守状況の確認、レビューや監査の実施、品質指標の設定と分析、リスクの早期発見と対策などが含まれます。 これにより、開発の初期段階から問題の発生を未然に防ぎ、手戻りやコスト増大を抑えることが可能になります。…

3 days ago

IFS CloudにおけるMigration Jobsの実践

概要 IFS Cloud におけるMigration Job(マイグレーションジョーブ)は、カットオーバーフェーズにおける最重要ボトルネックである。本稿では、実プロジェクトから抽出した知見をもとに、ステージングアーキテクチャ・トランザクション管理・冪等性設計・大容量データ処理・自動アラートの5領域にわたる実践的設計手法とトラブルシューティング戦略を体系的に解説する。適切に設計されたマイグレーションは単なるデータ移送を超え、監査可能性と再現性を備えた運用基盤となる。  (more…)

7 days ago

PQAとは? プロジェクトの成功を支える標準化と導入のメリット

近年、システム開発や製造業、さらにはサービス業においても「品質」の重要性がますます高まっています。 その中で注目されているのが「PQA(プロセス品質保証)」という考え方です。 従来の品質管理が「成果物の品質」を中心にしていたのに対し、PQAは「プロセスそのものの品質」を保証することに重点を置きます。 この記事では、PQAの基本概念と、プロジェクト成功にどのように寄与するのか、さらに導入のメリットについて解説します。 PQA(プロセス品質保証)について知りたい方 製造業やシステム開発をしたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばPQA(プロセス品質保証)の概要やメリットなども丸わかりですよ。 (more…)

2 weeks ago

【2034年まで】生成AIチャットボットの日本市場規模は3,300億円超へ予測

生成AIチャットボット市場は、近年のAI技術の進化とともに急速な成長を遂げており、日本においても例外ではありません。 特に、企業のDXの進展と、顧客対応の高度化・効率化ニーズの高まりを背景に、導入が加速しています。 本日はそんな生成AIチャットボットの日本市場規模について、現状とこれからの予測についてお伝えしていきたいと思います。 生成AIチャットボットが気になる方 生成AIチャットボットの市場規模を知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めば生成AIチャットボットの日本市場規模がわかるのはもちろん、その要因もわかりますよ。 (more…)

3 weeks ago

クラウド型とオンプレミス型の生成AIチャットボットの違い

近年、企業のDXが加速する中で、生成AIチャットボットの導入は急速に広がりを見せています。 顧客対応の自動化や業務効率化、さらには新たなユーザー体験の創出といった観点から、多くの企業がその活用に注目しています。 しかし、いざ導入を検討する段階になると、多くの企業が直面するのが「どのような形態で導入すべきか」という課題です。 この記事では、まず生成AIチャットボットの基本構造と進化の背景を整理した上で、クラウド型とオンプレミス型それぞれの特徴やメリット・デメリットを詳しく解説します。 AIチャットボットに興味がある方 クラウド型とオンプレミス型の生成AIチャットボットについて知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めばクラウド型とオンプレミス型の生成AIチャットボットの違いがわかるのはもちろん、企業がどのような観点で最適な方式を選択すべきか、さらに今後の技術動向もわかりますよ。 (more…)

1 month ago