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…)
ITの進化が止まらないベトナム。国策としてのIT教育が充実していて、若者のIT人口が多いのも特徴です。 そんなベトナムIT企業のランキング指標として、毎年発表されているのが「ベトナムIT企業トップ10」（前身：ベトナムIT企業 トップ50+10社）というものです。 この記事ではそんな「ベトナムIT企業トップ10」を参考に、ベトナムのIT企業の現状と課題について見ていきましょう。 ベトナムのIT事情が気になる方 オフショア開発が気になる方 ベトナムITの課題を知りたい方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばベトナムのIT企業の現状が丸わかりですよ。 (more…)
安価な労働力を利用して開発コストの削減ができるオフショア開発は中国とインドが中心でしたが、近年ベトナムオフショアに注目が集まっています。 この記事ではそんなベトナムオフショアが選ばれる7つの理由について解説しています。 ・オフショア開発が気になる方・社内のIT人材が不足している事業者の方・ベトナムオフショアについて知りたい方 これらに当てはまる方におすすめの記事となっています。これを読めば今大注目のベトナムオフショアのことがまる分かりですよ。 (more…)
近年、スマートフォンの普及とともに、ユーザーにとって使いやすく、企業にとっても効果的なウェブ体験の提供が求められています。 そうした中で注目されているのが「PWA（Progressive Web Apps）」です。 この記事では、PWAの概要や機能、導入によるメリット、そして具体的な導入事例についてわかりやすく解説します。 PWAが気になる方 アプリ開発をしたい方 開発効率を上げたい方 これらに当てはまる方におすすめの記事となっています。これを読めばPWAの特徴や導入のメリットなども分かりますよ。 (more…)
アプリ開発を検討する企業や個人にとって、最初に直面する課題は「どのようにアプリを作るか」です。 そこで本記事ではアプリ開発について、どのような工程があるのかゼロから徹底解説していきたいと思います。 アプリ開発をしたい方 アプリ開発初心者の方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばアプリ開発の効率の良い方法が丸わかりですよ。 アプリ開発に関わるすべての工程や手法を理解することで、発注者としてより良い判断ができ、プロジェクトを円滑に進めることが可能になります。 (more…)
近年、製造業を中心に広がってきた「チャイナプラスワン（China Plus One、中国＋1）」戦略が、IT業界でも注目され始めています。 中国に依存しすぎない経営体制を構築するためのこの動きは、製造業の枠を越え、ソフトウェア開発やITインフラといったデジタル領域にも拡大しています。 この記事では、チャイナプラスワンの概要から背景、IT業界における注目理由、そしてオフショア開発との関係性や活用事例までを詳しく解説します。 チャイナプラスワンについて知りたい方 オフショア開発に興味がある方 社内のIT人材が不足している方 これらに当てはまる方におすすめの記事となっています。これを読めばチャイナプラスワンの概要がわかるだけでなく、今後の展望も分かりますよ。 (more…)