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ソリューションへの簡単見積もりの依頼はこちら
オフショア開発は、コスト削減や専門的なスキルの活用を目的として、多くの企業が採用している手法です。 しかし、オフショア開発にはセキュリティに関する特有の課題が伴います。 この記事では、オフショア開発におけるセキュリティ課題を明確にし、それに対する効果的な対策を検討します。 オフショア開発に興味がある方 オフショア開発のセキュリティ対策について知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばオフショア開発を行う際に気をつけるべきセキュリティ問題とその対策方法が丸わかりですよ。 (more…)
2025年、データセンター市場とクラウド市場はさらなる進化を遂げています。デジタル化の加速や生成AIなどの新技術の普及により、データ処理能力の需要が急増。 これに伴い、世界および日本国内での市場規模とプレイヤーの動きが注目されています。 この記事では、最新の市場データとトレンドをもとに、データセンターおよびクラウド市場の現状と今後の展望を詳しく解説します。 データセンターおよびクラウド市場の現状や展望が知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めば国内の2025年最新のデータセンター市場やクラウド市場の動向だけでなく、世界の動向まで丸わかりですよ。 (more…)
近年、業務のデジタル化が進む中、手書きや印刷された文書を効率的にデータ化する技術が注目を集めています。 その中でも、AI（人工知能）を活用したOCR（光学文字認識）技術であるAI-OCRは、従来のOCRを大きく進化させ、多様な業界で導入が進んでいます。 この記事では、AI-OCRとは何か、従来のOCR技術との違い、その種類や具体的な導入メリットについて詳しく解説します。 AI-OCRが気になっている方AIをビジネスに取り入れたい方社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばAI-OCRがどのように業務効率を向上させ、現代のビジネスにどのような価値をもたらすのかがわかりますよ。 (more…)
システム開発の外注は、効率的なソリューションを提供し、コストを節約するために非常に有益な方法です。 しかし、外注のプロジェクトは失敗する可能性もあり、それを防ぐためにはいくつかの重要なコツがあります。 そこでこの記事では、システム開発の外注プロジェクトを成功させるための5つの重要なコツを説明します。 システム開発の外注をしたい方 社内のIT人材が不足している方 オフショア開発を検討している方 これらに当てはまる方におすすめの記事となっています。これを読めばシステム開発を成功させるための方法が丸わかりですよ。 (more…)
コスト削減や、IT人材確保の面で注目されるオフショア開発。 実はアプリ開発にももってこいの開発手法なのです。 「人件費は下がったとしても、他の面で費用がかかったりしないか？トータルコストは本当に下がるのか？」 「コストを抑えた結果、質の悪いアプリを納品されないか？」 など不安を抱えている方向けに、この記事ではアプリをオフショア開発する際のポイントを紹介していきます。 オフショア開発に興味がある方 アプリ開発を行いたい方 社内のIT人材が不足している方 オフショア開発の予算が知りたい方 これらに当てはまる方におすすめの記事となってこれを読めば、オフショア開発初心者の人でも会社選びを失敗することなく、アプリ開発を行うポイントが丸わかりですよ。 (more…)
近年、企業のデジタルトランスフォーメーション（DX）が進む中で、手書き文書をデジタル化する技術であるOCR（Optical Character Recognition）が注目を集めています。 この記事では、そんなOCRの基本的な仕組みやその活用方法、さらに業務効率化のメリットについて解説します。 OCRに興味がある方 デジタルトランスフォーメーション（DX）を進めている方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばOCRがどのような技術なのかがわかるのはもちろん、具体的な活用方法まで丸わかりですよ。 (more…)