PHPの人気のフレームワークLaravelではWebサイトの管理画面を開発することができます。
開発の手順に関しては以下の記事にて具体的に紹介をしていきました。
また、Heroku+Laravel+MySQLを独自ドメイン(SSL)で公開する【Laravel6+Nuxt.jsで作る管理画面】の記事で、HerokuにLaravelを独自ドメイン（SSL）でデプロイする手順を解説していきました。
この記事ではNuxt.jsをデプロイして、管理画面を公開して使うことが出来るようにする方法をご紹介！
これらに当てはまる方におすすめの記事となっています。このシリーズを読めばLaravel6とNuxt.jsで管理画面を作成することができますよ。
まずデプロイの前に、最低限やりたいことを決めておきます。
今回は実際の利用までを想定して以下の要件にしました。
● https://app.example.com/adminで管理画面にアクセスできる
● Cookieの認証機能が正常に動作する
● 管理者ユーザーの追加・編集・削除が問題なく行える本来はadmin画面にはBasic認証をつけるべきですが、今回の記事では割愛しています。
前回の記事ではNuxt.jsのデプロイにはFirebaseを使うと記載していましたが、
SSR（Server Side Rendering）の場合はFirebase Hosting以外にFirebase Functionsのデプロイが必要で、
なかなか面倒なので今回は導入を見送りました。
Herokuなら静的ファイルのホスティングとSSR両方を単体で行えるため、Laravelと同じ感覚でデプロイでき、非常にシンプルなので採用しました。
まず下記コマンドでNuxt.js用のアプリをHerokuに作成します。
heroku create admin-nuxt-app --buildpack heroku/nodejs以下のようなアプリが作られていればOKです。
次に下記コマンドを実行してプロダクション環境で動作する設定を反映します。
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production反映が完了したら、以下の内容のProcfileをルートディレクトリに追加します。
web: nuxt startこのファイルをHerokuにデプロイすれば、Nuxt.jsのサーバーを使ってアプリが起動するようになります。
次に下記コマンドでNuxt.jsアプリをHerokuでプッシュします。
git add .
git commit -m 'Add Procfile'
git push heroku masterプッシュが完了したらhttps://[アプリ名].herokuapp.com/admin に以下のような画面が表示されればOKです。
管理画面の認証に利用しているCookieはサブドメイン間であれば送受信が可能であるため、
前回のLaravelのデプロイ時と同様に、Nuxt.js側も独自ドメインの設定を行います。
Settings > Domains の項目から、「Add domain」をクリックすると、以下のような画面が表示されるので、アプリ用のサブドメインを追加します。
以下のような項目が追加されるので、この「DNS Target」の値をCNAMEで各ドメイン事業者のDNSレコードに設定します。
設定が反映されるまで時間がかかるので、待っている間に次の作業を進めてしまいましょう。
前回のLaravelのデプロイ時と同様に、HobbyプランにアップグレードしてSSLを有効化します。
次に下記コマンドでAPIリクエスト先のエンドポイントを環境変数に設定します。
heroku config:set API_URL=https://api.example.com/apiNuxt.jsでHerokuの環境変数を利用している場合、再コンパイルが必要になります。
以下コマンドで空プッシュを行うとコンパイルが実行され環境変数の内容が反映されます。
git commit --allow-empty -m "empty commit"
git push heroku master次に下記コマンドで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ソリューションへの簡単見積もりの依頼はこちら
「2025年の崖」とは、2018年に経済産業省が発表した「DXレポート」において示された概念です。 2025年には企業の基幹系システムの約6割が導入から21年以上経過し、適切な対策を講じなければ年間最大12兆円の経済損失が発生する可能性があると指摘されました。 この警鐘を受け、多くの企業がレガシーシステムの刷新やERP（Enterprise Resource Planning）の導入を進めました。 しかし、2025年を迎えた現在、単なるシステムの更改では企業の競争力向上には不十分であることが明らかになっています。 この記事では、「2025年の崖」を乗り越えた企業が直面する新たな課題と、それに対する具体的な対策について詳しく考察します。 2025年の崖に対する具体的な課題や解決策を知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば2025年の崖が現状どのような状況なのかやその対策などが丸わかりですよ。 (more…)
製造業において、生産管理の効率化は競争力を維持するために欠かせません。 その中でも、MES（Manufacturing Execution System）とERF（Enterprise Resource Planning for Factories）は重要な役割を果たします。 この記事では、そんなMESとERFについて、それぞれのシステムの概要、特徴、利点、そして違いについて詳しく解説します。 MESとERFについて気になる方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばMESとERFについてそれぞれの特徴がわかるのはもちろん、も分かりますよ。 (more…)
MESシステムは製造業において、生産現場の管理などを行うシステムです。MESシステムを導入することで、生産効率や品質の向上が期待されます。 本日はそんなMESシステムについて、どのような特徴があるのかやその役割やメリットなど徹底解説していきます。 MESシステムが気になっている方 製造業の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばMESシステムについて詳しくなるのはもちろん、導入の際に気をつけるべきことまで丸わかりですよ。 (more…)
オフショア開発は安価で高品質の開発ができる開発手法ですが、コミュニケーションの問題が発生しがちです。 そんなコミュニケーションロスの問題を解決するツールとして、今回紹介したいのがプロトタイプツールです。 プロトタイプツールを利用することで、会話型のコミュニケーションから視覚的なコミュニケーションに移行することができ、よりわかりやすく情報を共有することができるのです。 この記事ではそんなプロトタイプツールのおすすめ7つを紹介していきます。 オフショア開発に興味がある方 プロトタイプツールを詳しく知りたい方 オフショア開発のコミュニケーションの問題に悩まれている方 これらに当てはまる方におすすめの記事となっています。これを読めば、オフショア開発のコミュニケーション問題を解決する方法がわかりますよ。 (more…)
スマートフォン市場がますます進化する中で、モバイルアプリの開発技術も飛躍的に向上しています。 特に、クロスプラットフォーム開発の重要性が増し、開発スピードやコスト削減を実現するフレームワークが次々と登場しています。 この記事では、2025年に注目されるモバイルアプリ開発フレームワークを5つ紹介し、それぞれの特徴やメリットを詳しく解説します。 モバイルアプリ開発を行いたい方 モバイルアプリ開発フレームワークについて最新情報を知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばモバイルアプリ開発のフレームワークについて注目のものが何なのか丸わかりですよ。 (more…)
近年、クラウドインフラの導入が進む中で、オフショア開発においても効率的なクラウド基盤の構築が求められています。 しかし、クラウドインフラ基盤の構築に際しては、日本とベトナムの技術レベルや環境の違いによって課題が生じることが少なくありません。 そこでこの記事では、ベトナムオフショア開発でもスムーズにクラウドインフラを構築するためのコツについて詳しく解説し、成功のためのポイントを紹介します。 オフショア開発に興味がある方 クラウドインフラを導入しようとお考えの方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば、オフショア開発を活用する企業がクラウド環境を安定的に運用できる方法が分かりますよ。 (more…)