実践で学ぶ、Laravelをローカルから本番環境にデプロイするまで

Laravelを本番環境にデプロイするまで

2019年3月19日、LaraVue勉強会が主催するイベント「Laravel/Vue.js勉強会#8 オールスターズ」が開催されました。LaravelやVue.jsを用いて開発を行っている各社が一堂に会し、互いの知見を共有する本イベント。第8回となる今回は、過去に登壇した企業のエンジニアたちがLTを行います。プレゼンテーション「Laravelを本番環境にデプロイするまで 」に登壇したのは、株式会社うるるの紅林優氏。講演資料はこちら

Laravelを本番環境にデプロイするまで

紅林優氏(以下、紅林):「Laravelを本番環境にデプロイするまで」とテーマでLTさせていただきたいと思います。

まず最初に自己紹介させていただきます。

私、株式会社うるるでサーバサイドエンジニアをやらせていただいている、新卒1年目の紅林といいます。どうぞよろしくお願いします。Twitterは、@yukure3というアカウントでやっているので、よろしかったらフォローしていただけるとうれしいなと思います。最近やっていることは、Laravelを使ってAPI作ったりとか、Vue.jsでフロントのお仕事をさせていただいております。

お伝えしたいことがございまして、私、今回のLTが人生初LTで初登壇になります。なので、つたない点とか、「何言ってるんだろこいつ」みたいなことがたくさんあると思うんですけども、そこは温かい目で見守っていただけたらと思っております。どうぞよろしくお願いします。

(会場拍手)

本日、私、こんな方に向けてLTを作ってきました。

「なんかLaravelよさそうだから使ってみたいなぁ」とか、「開発環境どう立ち上げるのが楽なのかなぁ」とか、「本番運用も考えないといけないけど楽できないかなぁ」みたいな方にLaravelでの開発で集中できる方法をちょっとお伝えしたいなと思っております。

Laravel自体の良さとかVue.jsのお話は、他の私よりもめっちゃ強いエンジニアの方々がたくさんしてくれると思うので、私はあえてLaravelに集中できる方法をお伝えしたいと思います。

アジェンダとしてこんな感じになってます。

実現したいこととか、必要なこととか、まとめみたいな感じですね。

実現したいこと

今回はこんな感じのことを実現したいと思っております。

ローカルから本番のデプロイまでって感じですね。これを実現するために必要なものがございまして、4つあるんですけども、ローカルと本番、あとCl/CDパイプライン、バージョン管理。上からこんな感じで、アイコンを載せさせていただいたんですけども、こんなものを使って今回は先ほどの環境を作っていきたいと思っております。

まず、ローカル開発環境の構築ですね。

この男の人がパソコンやってるところをlaradockで作っていきたいと思います。

コードをちょっと載せさせていただいたんですけども、ディレクトリを作って、laradockをクローンして、laravelをインストールしてみたいな感じの流れになっています。

ディレクトリ構造が一番下に書いてありまして、laradockのところにいるような感じですね。laradockとlaravelをインストールしてきたら、.envの修正をしていきます。

アプリケーションが置いてある場所だったりとか、nginxのポート、mysqlのversionを5.7とかに変更していくような感じですね。これlatestって一番下に書いてあるんですけど、latestしたままにしているとlaradockが動かないみたいなことがあったりするので、今回、開発環境ということもあって、5.7を使います。

次にlaravelの.envも修正していきたいと思います。

こんな感じで修正します。

docker-compose upみたいにやると、laravelの環境が立ち上がります。めっちゃ簡単です。ここまでがLaravelの開発環境、ローカル開発環境の構築です。

本番の開発環境の構築

次に本番の開発環境の構築です。

一番右側です。ここを作っていきます。

Elastic Beanstalkで作っていくんですけども、AWSのマネジメントコンソールにいっていただいて、Beanstalkと検索してアプリケーションを作って、アプリケーション名を書く。このアプリケーション名が後ほどデプロイするときとかに必要になってくるので、覚えときますみたいな感じです。

アプリケーションを作ったら、環境を作って、Webサーバ指定という流れになってますね。ここの環境名も後ほど使うので覚えておきます。

環境の構築をしまして、ここでDBの設定も一緒にやっちゃおうみたいな感じで、Webサーバ構築。これで本番環境もできました。このように、すごく簡単に構築することができます。

バージョン管理

バージョン管理は何やってやるかというと、みなさんもご存じというか、めっちゃ使ってると思いますが、GitHubで作ります。

まずリモートリポジトリを作って、各種設定を済ませて、pushして、という感じになります。

せっかくなので、ブランチをマスターからdevelopにデフォルトを変えて開発していきます。

CI/CDのパイプライン

次にCI/CDのパイプラインです。

これはCircleCIを使って、赤枠のところを作っていきたいと思います。いきなりCircleCIの設定に入るわけではなく、AWSでIAMのロールを作成します。

こんな感じにロールを作りまして、今回はデプロイ用のロールというわけでプログラムによるアクセスにチェックを付けていただいて、AWSをElastic Beanstalkに対するフルアクセス権限を持ったポリシーをアタッチして、ユーザを作っていきます。

作ったら、CSVのダウンロードというところに赤枠しているんですけど、これをダウンロードしとかないと、シークレットアクセスキーが今後一切見れなくなってしまうので、一応ダウンロードしておくことを忘れないようにします。

ようやく、デプロイする用の設定をしていきます。

自分のPCに、EBコマンドを打てるようにEB CLIをインストールしておきます。そして、eb initコマンドをlaravelのアプリケーションが入っているディレクトリ内でやると、こんなことを聞かれます。

めっちゃ長いのでざっくり何聞かれているかをまとめると、リージョンを聞いてたりとか、どのアプリケーションを使うかとか、どの環境にデプロイするかとか、CodeCommitを使うか みたいなことを聞かれます。なので、アジアパシフィックを選択したり、先ほど「ここで覚えときます」と言ったアプリケーション名をつけたりとか、あるいは環境名をつけたり、CodeCommit使いません! みたいな設定をして、するとですねElastic Beanstalkのconfig.ymlが作成されます。

これだけではなく、config.global.ymlを作って「このように設定する」というところをそのまま書いていただいて、これで設定が終わります。

CircleCIの設定

次に、CircleCIの設定をしていきます。

めっちゃ長いのですが、ディレクトリを作って、configをうつして設定して、こんなBIOSを設定します。

大変見にくくて大変申し訳ないのですが、具体的に何を書いているかというと、コンテナのイメージとか環境変数の設定をして、ビルドとテストの情報を定義して、運用環境へデプロイする設定を書いて、Workflowを定義しています。

この中で一番肝になる部分が、「運用環境へのデプロイ」の箇所でして、これをちょっとピックアップさせていただきました。

具体的に何をやっているかというと、コードをgithubからチェックアウトしてきて、EB CLIをインストールします。そして、eb deploy laravel-vueというように、アプリケーションの環境にデプロイしていくような設定をしております。

今何したのかをざっくりご説明すると、プルリクが作成されたら、ビルドとテストが実行されるって設定を書いたのと、masterブランチにプルリクがマージされたらeb deployコマンドが実行されるような設定をしました。

これでCircleCIのWebサイトにいきまして、こんな感じで設定していきます。

今回はLaravelを使用するので、Linux・PHPを設定します。そして、start bildingというボタンがあるので、こちらを押していただくと、こんなようなページに遷移します。

このあとにデプロイするために、先ほど.csvでダウンロードしたシークレットアクセスキーとアクセスキーをCircleCIの環境変数に設定します。これを設定しないとデプロイできませんよ、と怒られちゃうのでちゃんと設定するようにします。

確認のために、readmeを編集するようなブランチを切って作業しました。

そして、作業した内容をgithubへpushして、プルリクを作ると一番下のほうにCircleCIのアイコンが出て、一応中身を見ると、ビルドとテストの処理結果が表示されています。

このPRをマージしたらCircleCIのダッシュボードにいっていただくと、ジョブが実行されていることが確認できるかと思います。

そして、workflowがこの様になっていて、ビルドが動いた後にデプロイが走ります。

これを作成したらBeanstalkをかけるほうにいってデプロイがかけるほうに完了しましたので、ページを見てみます。

するとForbiddenとなります。

あれ? って思ってよく考えたんですよ。私、ドキュメントルートの設定をしていなかったんですね。なのでこれ、忘れないようにしていただけるといいかなって思います。

/publicとやって、またアクセスしたらForbiddenの500のページにいったんですね。

どうしたのかな? と思ったら、これを忘れてました。

laravel、暗号化とかする関係でAPP_KEYを使うとして、これをちゃんと設定してやって、やっとWelcomページが表示されました!

まとめ入らせていただきます。

本日お伝えしたかったことは、開発環境はLaradockを使って簡単に構築できるよ! っということだったりとか、運用環境はEB使って簡単に構築できるよ! CI/CDパイプラインもお気軽運用できますね! などのことでした。

ご清聴ありがとうございました。

(会場拍手)

Occurred on , Published at

LaraVue勉強会

LaraVue勉強会に関する記事をまとめています。コミュニティをフォローすることで、LaraVue勉強会に関する新着記事が公開された際に、通知を受け取ることができます。

スピーカーをフォロー

関連タグ

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

ログミーTechをフォローして最新情報をチェックしよう!

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

そのイベント、ログしないなんて
もったいない!
苦労して企画や集客したイベント「その場限り」になっていませんか?