システム開発

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クラウドへ移行すべき4つの理由

製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。そのような中で注目されているのが、クラウド型ERPへの移行です。 この記事では、「IFSクラウドへ移行すべき4つの理由」というテーマで、IFS Cloudがなぜ多くの企業に選ばれているのかを詳しく解説します。 IFSクラウドに興味がある方 製造業や建設業の方 従来型ERPをお使いの方 これらに当てはまる方におすすめの記事となっています。これを読めばIFSクラウドへ移行すべき理由がわかるだけでなく、経営改革の視点からIFS Cloudの価値を整理することができますよ。 従来型ERPの限界とIFS Cloud 製造業や建設業、航空・防衛、エネルギー、サービス業など、複雑な業務を抱える企業にとって、ERPシステムは単なる基幹システムではなく、経営そのものを支えるインフラとなっています。 しかし近年、多くの企業で従来型ERPの限界が顕在化しています。 オンプレミス環境の維持コスト増大、システム老朽化、カスタマイズ肥大化による運用負荷、グローバル対応の難しさ、そしてDX推進への対応不足など、企業を取り巻く課題は年々深刻化しています。 そのような中で注目されているのが、クラウド型ERPへの移行です。そして、その中でも特に製造業やプロジェクト型ビジネスを展開する企業から高い評価を受けているのがIFS…

3 days ago

【2026年最新】IFS CloudとSAPを徹底比較|製造業に強いのはどっち?選定のポイントを解説

製造業を取り巻く環境は、ここ数年で大きく変化しています。原材料価格の高騰、サプライチェーンの不安定化、人手不足の深刻化、さらにはDXの加速など、企業にはこれまで以上に迅速かつ柔軟な意思決定が求められています。 こうした中で注目されているのが、企業の基幹業務を統合・最適化するERP(基幹業務システム)の再構築です。 その中で、多くの製造業が比較検討しているのが「IFS Cloud」と「SAP」です。いずれもグローバルで高い評価を受けているERPでありながら、その強みや設計思想は大きく異なります。 そのため、「どちらを選ぶべきか分からない」「自社に合うのはどちらなのか判断できない」といった悩みを抱える企業も少なくありません。 この記事では、そんなIFS CloudとSAPを「製造業」という視点から徹底比較し、それぞれの特徴や強み、導入時のポイントを分かりやすく解説します。 製造業の方 IFS CloudとSAPに興味がある方 グローバルERPの導入を検討している方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとSAPの違いがわかるだけでなく、「どのような企業にどちらが適しているのか」がわかりますよ。 (more…)

2 weeks ago

【2026年最新】IFS CloudとDynamics 365の違いとは?機能・強みを比較解説

企業の基幹システムとして導入が進むクラウドERPの中でも、IFS CloudとMicrosoft Dynamics 365は世界的に高い評価を受けている代表的なソリューションです。 しかし、両者は同じERPでありながら設計思想や強みが大きく異なります。 この記事では、2026年時点の最新情報をもとに、IFS CloudとDynamics 365の違いを「機能」「強み」「向いている企業」という観点から徹底的に比較解説します。 IFS CloudやDynamics 365の導入を検討している方 社内のIT人材が不足している方 クラウドERPに興味がある方 これらに当てはまる方におすすめの記事となっています。これを読めばIFS CloudとMicrosoft…

2 weeks ago

【2026年版】製造業向けAI搭載グローバルERP:注目の次世代ソリューション6選

製造業におけるERPは、単なる基幹システムから「意思決定の中枢」へと進化しています。 特に2026年現在、AIの統合はもはやオプションではなく、競争力を左右する重要な要素となっています。 AIを搭載したERPは、従来の「可視化」から一歩進み、「予測」「最適化」「自動化」を実現し、企業の意思決定スピードと精度を飛躍的に向上させています。 この記事では、製造業向けに特化したAI搭載グローバルERPの中から、特に注目すべき6つのソリューションを徹底解説します。 AI搭載グローバルERPに興味がある方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば最新版のAI搭載グローバルERPがわかるのはもちろん、製造業におけるERPの選び方まで丸わかりですよ。 (more…)

3 weeks ago

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

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

3 weeks ago

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

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

3 weeks ago