システム開発

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

なぜ今、企業にAX(AIトランスフォーメーション)が必要なのか?

近年、AI(人工知能)は私たちの生活だけでなく、企業活動にも急速に浸透しています。 文章作成や画像生成、データ分析、問い合わせ対応など、これまで人が担っていた業務をAIが支援・代替できるようになり、多くの企業がAI活用に注目しています。 一方で、「AIツールを導入しただけ」で終わってしまう企業も少なくありません。 本当に競争力を高めるためには、単なるAI活用ではなく、企業全体をAI中心に変革する「AX(AIトランスフォーメーション)」という考え方が重要になります。 この記事では、AXとは何か、DXとの違い、そしてなぜ今企業にAXが必要なのかについて詳しく解説します。 AXに興味がある方 AIを活用したいとお考えの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば今注目のAXについて丸わかりですよ。 AXとは? AX(AI Transformation:AIトランスフォーメーション)とは、AIを単なる業務効率化ツールとして導入するのではなく、AIを中心に企業のビジネスモデルや組織、業務プロセス、意思決定までを根本的に変革する取り組みを指します。 例えば、これまでAIはメールの自動返信・チャットボット・売上予測・在庫管理など、一部の業務改善に使われるケースがほとんどでした。 しかしAXでは、AIを企業経営の中心に据えます。 例えば営業部門ではAIが顧客ごとの提案内容を作成し、マーケティング部門ではAIが市場分析を行い、人事部門ではAIが採用候補者を分析し、経営層はAIによる将来予測を参考に経営判断を行うといったように、企業全体がAIと共に動く組織へ変わっていきます。…

18 hours ago

2034年に向け急拡大するベトナム企業AI市場:最新の市場規模・シェアと未来予測

生成AIの急速な普及を背景に、世界各国で企業のAI活用が加速しています。 その中でもベトナムは、政府による積極的なAI政策やデジタル化の推進、海外企業による投資拡大を追い風に、東南アジア有数の成長市場として注目を集めています。 この記事では、最新の市場規模や市場シェア、成長を支える要因、主要企業の動向をもとに、2034年に向けたベトナム企業AI市場の将来性と日本企業に広がるビジネスチャンスについて詳しく解説します。 AI市場に興味がある方 ベトナムのIT市場に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばベトナム企業のAI市場規模がわかるのはもちろん将来の予測もわかりますよ。 (more…)

2 weeks ago

アジャイル・ウォーターフォール・ハイブリッド:企業価値を最大化する開発戦略の選び方

近年、システム開発で代表的な手法として長年利用されてきたのが「ウォーターフォール開発」と「アジャイル開発」を組み合わせた「ハイブリッド開発」が新たな選択肢として注目されています。 この記事ではそんな「ハイブリッド開発」について、どう言った特徴があるのかや、企業価値を最大化するためにはどのような視点で開発戦略を選択すべきかについて見ていきます。 アジャイル開発に興味がある方 DX化を進めたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば「ウォーターフォール開発」と「アジャイル開発」のそれぞれの特徴と、それを掛け合わせた「ハイブリッド開発」の特徴が丸わかりですよ。 アジャイル開発の特徴とメリット アジャイル開発とは、「素早い」「俊敏な」という意味を持つ言葉の通り、変化に柔軟に対応しながらシステムを開発する手法です。 従来のウォーターフォール開発では、要件定義、設計、開発、テスト、リリースという工程を順番に進め、最後に完成したシステムを利用者へ提供します。 一方、アジャイル開発では短期間の開発サイクル(スプリント)を繰り返します。一般的には1〜4週間程度の期間で、優先度の高い機能を開発し、動作する状態で提供します。 その後、利用者から意見をもらい、次の開発に反映します。 この流れを繰り返すことで、利用者の本当のニーズに近いシステムを作りやすくなります。 例えばECサイトの決済機能を開発する場合、最初からすべての決済方法を実装するのではなく、まずクレジットカード決済だけを提供し、その後電子マネーやQR決済などを追加していくことが可能です。 この方法では、早い段階でサービスを市場へ投入でき、利用状況を確認しながら改善できます。 アジャイル開発の主なメリットは以下の通りです。…

3 weeks ago

7Rフレームワークとは?生成AI活用で加速するレガシーシステムマイグレーション

企業の基幹システムの多くは、10年、20年、あるいは30年以上にわたって運用され続けています。 しかし近年、こうしたレガシーシステムを取り巻く環境は大きく変化しています。 近年、注目されているのが「7Rフレームワーク」です。 7Rフレームワークは既存システムをクラウド環境へ移行する際に採用される代表的な意思決定モデルであり、システムごとに最適な移行戦略を選択するための考え方です。 この記事ではそんな7Rフレームワークについて、特徴を紹介していきます。 7Rフレームワークに興味がある方 生成AIを活用したい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば7Rフレームワークの特徴がわかるのはもちろん、AI時代での7Rフレームワークについて丸わかりですよ。 (more…)

3 weeks ago

構造変化に直面するオフショア開発:「量」の補完から「AI Native」への転換期

オフショア開発は従来の「量」の補完から、しかし、生成AIの急速な進化によってその前提が大きく変わろうとしています。 今後は「どれだけ高い生産性を実現できるか」が重要です。 この記事ではそのようなオフショア開発のあり方の変化について見ていきます。 オフショア開発に興味がある方 社内のIT人材が不足している方 AIを使った開発に興味がある方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発の変化についてわかるのはもちろん、AI Nativeについても丸わかりですよ。 (more…)

4 weeks ago

生成AI時代における「2030年に79万人IT人材不足」の再定義と構造変化

近年、日本のIT業界では「2030年に最大79万人のIT人材が不足する」という予測が繰り返し語られています。 この数字は、日本社会のDX推進や企業のシステム開発を支える人材の不足を警告する象徴的な指標として広く認知されています。 しかし、2022年末以降の生成AIの急速な発展により、この予測の前提条件は大きく変化しています。 かつては人間が手作業で行っていたプログラミング、設計書作成、テストケース生成、ドキュメント作成、データ分析などの業務が、AIによって大幅に自動化され始めているためです。 その結果、「79万人不足」という予測を単純に受け入れるのではなく、「どのような人材が不足し、どのような人材の需要が減少するのか」という質的な観点から再検討する必要が生じています。 この記事では、生成AI時代におけるIT人材不足の構造変化を分析し、2030年に向けて求められる人材像について考察をしていきます。 生成AI時代が気になる方 IT業界の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば「2030年79万人IT人材不足」問題について、新しい見解とその対策がわかりますよ。 (more…)

1 month ago