[{"data":1,"prerenderedAt":1163},["ShallowReactive",2],{"tag-infrastructure-2":3},{"count":4,"content":5},12,[6,274],{"id":7,"title":8,"body":9,"category":260,"createdAt":262,"description":8,"extension":263,"index":264,"meta":265,"navigation":266,"path":267,"publish":266,"seo":268,"series":264,"seriesTitle":264,"stem":269,"tag":270,"thumbnail":272,"updatedAt":264,"__hash__":273},"articles\u002Farticles\u002Fstudyflow-lamp-byself.md","一人でLAMP環境を作れるようになるまでの勉強フロー。",{"type":10,"value":11,"toc":241},"minimark",[12,16,19,22,25,58,63,66,69,73,76,79,83,86,89,92,95,98,101,104,117,120,123,126,129,149,152,155,158,161,164,167,170,173,181,184,198,201,205,208,225,228,232,235,238],[13,14,15],"p",{},"こんにちはjunです。私はフロントエンド エンジニアとして2019年の12月にWeb系会社に入りましたが、社員数が少ない上に複数のお取引先のサイトを保守しているのでサーバーの知識がまず必要になりました。",[13,17,18],{},"入社前まではサーバーというとXserverのようなレンタルサーバーにFTPを使ってファイルを転送したり、MAMPやXAMMPを用いてサーバーに似た環境を整えるといったぐらいの知識しかありませんでした。",[13,20,21],{},"ですがなんやかんや勉強したり仮想環境を用いて構築を行いました。おかげで入社3ヶ月目には実務上必要なLAMPサーバー構築作業ができるようになり、本番用のサーバーの構築も行い現在稼働しています。さらにインフラ部分とフロント部分との繋がり、またWebサービスの提供がどうやって行われるのかをよく理解できました。",[13,23,24],{},"今回の記事では実務上に求められるサーバー構築ができ、そしてある程度インフラ部分がわかるようになるため私が行った・意識したことを共有したいと思います。別途の記事でLAMP環境の構築方法とかvagrantのインストール方法を書きます。",[26,27,31,35,36,39,40,43,44,47,48,51,52,54,55,57],"div",{"className":28},[29,30],"alert","alert-success",[32,33,34],"b",{},"LAMP","とはOSが",[32,37,38],{},"L","inux系、Webサーバーに",[32,41,42],{},"A","pache、DBサーバーに",[32,45,46],{},"M","ySQL、サーバーサイド言語として",[32,49,50],{},"P","HP\u002F",[32,53,50],{},"erl\u002F",[32,56,50],{},"ythonのどれかを入れたサーバー環境のことです。\n",[59,60,62],"h2",{"id":61},"vagrantで仮想環境がお手軽","Vagrantで仮想環境がお手軽",[13,64,65],{},"まずプログラミングを習いたての方、例えばPHPを使ってDBと連携したり、JSライブラリのjqueryを用いてUIを学習するぐらいであればMAMPやXAMMPでOKです。ですがMAMPから次のステップに進むならばVPSやvagrantを用いてサーバーという物に触れた方が良いです。",[13,67,68],{},"VPSはお金がかかったりクラッシュさせると面倒なので、学習においてはvagrantがベストです。",[70,71,72],"h3",{"id":72},"vagrantとは",[13,74,75],{},"vagrantとはvirtual boxという仮想マシンを動かすためのツールです。仮想マシン、つまりMacのなかにWindowsの環境を構築したり、CentOS(商用のサーバーでよく使われるOS)を入れてサービスをリリースする環境を自分のPCに構築します。",[13,77,78],{},"仮想マシンを素で環境を構築しようとすると大変なので、vagrantというツールで「大体みんなこんな機能使うよね」という感じで設定してくれます。vagrantで構築するOSを指定すればあとはコマンドを使って自前サーバーを設定できるようになります。まあ、vagrant使えばVPSとか商用のサーバー環境を自分のPCで作れるんだなと思ってください。",[70,80,82],{"id":81},"どうして仮想環境が良いの","どうして仮想環境が良いの？",[13,84,85],{},"vagrantが良いのはdockerとは違って、実際のLAMP環境を構築する手順をローカルPC上で実演できるからです。最近はdockerでコードを書いてサーバー構築するという方法もありますが、それでもコマンドをポチポチ唱えてソフトやミドルウェア をインストールして..と構築する場面はまだ多いです",[13,87,88],{},"仮想環境なので例えミスって動かなくなっても壊して、再構築すれば良いだけです。そして仮想環境ですが、実際のサーバー構築と同じ動きをするのでサーバーのディレクトリ構成や、コマンド操作の練習が行いやすいです。",[13,90,91],{},"さらに言えば失敗できる環境なので、何かしらエラーが起きてそれを直してみるという経験は貴重です。サーバーでエラーということはwebページが全く表示されなかったり、サービスが停止する本番のサーバーでは失敗が許されません。その点を考えれば自由に失敗できる仮想環境は素晴らしいインフラ学習環境でもあります。",[70,93,94],{"id":94},"dockerだって失敗できるじゃないか",[13,96,97],{},"確かにdockerも同様に失敗できて、すぐに環境の再構築と破棄が可能です。しかしdockerを用いて環境構築するにはOSのディレクトリ構成とかApacheの設定の仕組みとかをインフラを最低限知っておかないと、ただの暗記コードを書くだけになります。",[13,99,100],{},"「このフォルダに〜〜の構成ファイルがあって、ここに設定しているのんだな〜」というのを理解するにはvagrantを用いて実際のサーバーを探検するのがベストです。",[59,102,103],{"id":103},"webサービスが提供される本質を知る",[105,106,107,111,114],"ul",{},[108,109,110],"li",{},"なぜ https:\u002F\u002F~~~~~とブラウザで検索するとwebサイトが見れるのですか？",[108,112,113],{},"ドキュメントルートとは何ですか？どこで設定できますか？",[108,115,116],{},"IPアドレス、ドメイン、ポートとはサーバーではどんな意味を持ちますか？",[13,118,119],{},"webサービスを提供するためにはインターネットに接続されたサーバーが必要です。ではサーバーに何をインストールして、何を設定して、どこにファイルをおけば自分が作ったアプリが実行され、他の人も使えるようになるのかをよく理解することです。",[13,121,122],{},"処理フローを追って、そしてインストールしたものがどのように相互作用しているのかを勉強するとインフラの知識の習得が早くなります。",[70,124,125],{"id":125},"まずはサーバーの基礎知識から",[13,127,128],{},"しかしインフラの知識がない中でソフトの相互作用とか全くわからないので、ソフトの前にサーバーの以下の知識を知るといいです。",[105,130,131,134,137,140,143,146],{},[108,132,133],{},"OS（どんな時に使われるのか、有料なのか無料なのか程度）",[108,135,136],{},"ディレクトリ構成",[108,138,139],{},"ディレクトリ内の役割（ざっくり）",[108,141,142],{},"権限とユーザー（大事です）",[108,144,145],{},"SSHの方法と接続",[108,147,148],{},"コマンドの意味",[13,150,151],{},"まずはこれは基礎知識です。PC何に接続したvagrantまたはリモート上のVPSとかに接続する方法、サーバーの中を探求するためのコマンドは知っておかないとまずサーバーをいじれません笑",[13,153,154],{},"私も「vagrantを構築したのはいいけど、仮想サーバーはどこにあるん？？」となってました。",[70,156,157],{"id":157},"ソフトウェア等をいれる",[13,159,160],{},"MAMPなどをインストールするとApache,PHP,Mysqlが入っていました。しかしvagrantで構築するとそれらは入っていません。自分でコマンドを唱えてインストールします。しかしそれらをインストールして稼働できるようになれば、webサービスを構築できます。",[13,162,163],{},"「vagrant \u003Cソフトウェア名> インストール」と検索して方法を調べましょう。",[59,165,166],{"id":166},"サーバー構築練習で意識すること",[70,168,169],{"id":169},"ググる際の注意",[13,171,172],{},"サーバー構築では絶対にエラーで悩みます。「Permission Deniedになる..」「PHPがインストールできない！」「500 Internal Server Error？もう知らん！」となるでしょう。エラーになった時は基本的にはググるのですが、そのググりの際に以下の点に注意しておくといいです。",[105,174,175,178],{},[108,176,177],{},"バージョンによる差異に気をつける",[108,179,180],{},"検索した記事の発行日時に気をつける\n-その記事では何をしたいのか？どんな問題を解決しようとしてるのか、前提条件を確認する",[13,182,183],{},"特にバージョンによる差異は要注意です。自分がインストールしようとしているバージョンと、記事内で解説されているバージョンには気をつけましょう。特に",[105,185,186,189,192,195],{},[108,187,188],{},"Apache2.2とApche2.4",[108,190,191],{},"CentOS6とCentOS7",[108,193,194],{},"MySQL5.7とそれ以前",[108,196,197],{},"PHP5系とPHP7系",[13,199,200],{},"こいつらには注意です。私もかなり苦労しました。バージョンごとに設定が大きく変わったりしているので、単に調べてコピペするだけでは解決しません。とりあえずどんなエラーが起きたのかログをメモして、バージョンに気をつけながら検索をしましょう。",[70,202,204],{"id":203},"まずはhelloworldhtmlを出してみよう","まずはHelloworld.htmlを出してみよう",[13,206,207],{},"ここでは主に勉強フローしか書いていませんが、",[105,209,210,213,216,219,222],{},[108,211,212],{},"vagrantとvirtual boxをいれる",[108,214,215],{},"OSを指定して仮想サーバーを立てる",[108,217,218],{},"必要なソフトウェア等をインストール",[108,220,221],{},"ドキュメントルート にHelloworld.htmlを入れておく",[108,223,224],{},"ブラウザでアクセスしてHelloworld.htmlを表示する",[13,226,227],{},"という流れができればインフラの理解はまず進みます。あとはセキュリティとか運用方法とか権限設定を学んでいくといいです。まずは最低限のインフラを整えて自分のwebサービスを表示・機能できるようにすると達成感と理解が半端じゃないです。",[59,229,231],{"id":230},"lampはオワコンとか言われるが気にするな","LAMPはオワコンとか言われるが気にするな",[13,233,234],{},"確かに最近はLAMP通りの環境ではなく、WebサーバーにNginx、DBはPostgreSQL、ていうか「Dockerでよくね？」「AWS上での構築でしょ！」とも言われて「LAMPは古い。オワコンだ」とも言われます。",[13,236,237],{},"しかし私が思うのはこれらの話は「あくまでより良いwebサービスを提供するための技術選定のお話」であってインフラのことを知っている人たちのお話だと思います。インフラ初学者にとって、基本と言いますか原理的な部分としてはLAMP環境でサーバーの知識を知った方が敷居が低いと思います。",[13,239,240],{},"多分LAMPほど情報が多く、チュートリアルで分かりやすい環境構築はさほどないと思います。LAMPからサーバーのことを知っていけば、AWSなりDockerなどLAMP以外の環境構築もすぐに理解できると思います。",{"title":242,"searchDepth":243,"depth":243,"links":244},"",3,[245,251,255,259],{"id":61,"depth":246,"text":62,"children":247},2,[248,249,250],{"id":72,"depth":243,"text":72},{"id":81,"depth":243,"text":82},{"id":94,"depth":243,"text":94},{"id":103,"depth":246,"text":103,"children":252},[253,254],{"id":125,"depth":243,"text":125},{"id":157,"depth":243,"text":157},{"id":166,"depth":246,"text":166,"children":256},[257,258],{"id":169,"depth":243,"text":169},{"id":203,"depth":243,"text":204},{"id":230,"depth":246,"text":231},[261],"learning","2020-07-12","md",null,{},true,"\u002Farticles\u002Fstudyflow-lamp-byself",{"title":8,"description":8},"articles\u002Fstudyflow-lamp-byself",[271],"infrastructure","_mix\u002Flamp.png","CKQOQrbqpmm4wvhwV_T8AhiuagWuX6LvExE6cLH8lcM",{"id":275,"title":276,"body":277,"category":1152,"createdAt":1154,"description":276,"extension":263,"index":264,"meta":1155,"navigation":266,"path":1156,"publish":266,"seo":1157,"series":264,"seriesTitle":264,"stem":1158,"tag":1159,"thumbnail":1161,"updatedAt":264,"__hash__":1162},"articles\u002Farticles\u002Flalavel7-deplay-on-heroku.md","HerokuにLaravel 7.0で作成したアプリケーションをデプロイする。",{"type":10,"value":278,"toc":1121},[279,282,290,294,297,308,315,319,322,336,339,342,346,352,355,370,373,376,380,383,388,395,398,431,435,439,450,453,456,463,466,470,477,480,485,491,494,497,500,503,506,513,516,519,523,526,529,536,539,544,547,551,557,560,563,566,569,577,582,585,588,591,594,598,610,614,617,621,624,809,812,826,829,838,841,849,852,859,867,870,874,880,883,886,890,893,896,899,904,907,910,914,917,923,930,933,936,940,948,951,954,962,965,971,977,984,990,993,999,1002,1006,1012,1015,1032,1035,1039,1042,1056,1059,1063,1066,1069,1073,1076,1082,1085,1088,1091,1094,1097,1104,1107,1110,1114,1117],[13,280,281],{},"こんにちはじゅんです。会社で試験的に作成したLaravelアプリケーションをHerokuにデプロイする機会があり、いくらかハマりポイントなどがあったのでメモがてら残そうと思います。どんなLaravel アプリなのかなど、ある程度具体的な要件の定義から書くので、",[13,283,284,285,289],{},"「さっさとデプロイの説明しろや！」という人は目次から ",[286,287,288],"strong",{},"「Herokuへのデプロイ作業を開始」"," をクリックして飛んでください。",[59,291,293],{"id":292},"デプロイの前に作成したlaravel-アプリについて","デプロイの前に、作成したLaravel アプリについて",[13,295,296],{},"会社でRestfulなWebAPIとそのコンテンツを提供するサービスを開発しようという動きがあり、Laravelやvue、webAPIは少しわかる私に試験的な開発をまかされLaravelで作りました。",[13,298,299,300,303,304,307],{},"最近、巷で有名な ",[286,301,302],{},"「Headless CMS」と似たような動きをします。"," 細かい要件は書くことはできないですが、 ",[286,305,306],{},"LaravelでAPIサーバー兼コンテンツ管理画面を作成して置きます。"," お客さんはアプリケーションにログインしてコンテンツの編集などを行えます。そしてフロントエンドは別のサーバーに配置するか、既存のアプリを使用します。",[13,309,310,311,314],{},"Ajaxなどを通して認証付きAPIをLaravelが置いてあるサーバーに投げれば、 ",[286,312,313],{},"データ（掲載コンテンツの内容）をJSON・XMLで手に入れることができます。"," 欲しい情報は適宜、非同期でAPIで呼び出して取得するという形式を取っています。モダンなやり方ですね。",[70,316,318],{"id":317},"laravel-でapiサーバーを構築した理由","Laravel でAPIサーバーを構築した理由",[13,320,321],{},"APIサーバーを構築するフレームワークは他にもありますが以下のような理由により、Laravelを選びました。",[105,323,324,327,330,333],{},[108,325,326],{},"私が扱いやすい。学習しやすい。",[108,328,329],{},"Laravel Passport でOAuth2.0 に準拠したAPI認証機能をさくっと構築可能",[108,331,332],{},"Laravel Mixのおかげで管理画面（お客さんが触るGUI）の作成がとても簡単。",[108,334,335],{},"LaravelにはAPIに関する認証や制限を設置できるので、",[13,337,338],{},"決められたお客さんのコンテンツ（サーバー）からのAPIアクセスを許可する。\nお試しユーザー、プレミアムユーザーと言ったユーザーロールごとに使用できるAPIの制限が簡単。\nと言ったことも可能です。「やっぱりLaravelはフルスタックフレームワークだけあるな」と思えるほどの物です。とにかく上記のようなLaravel アプリを今回はHerokuにデプロイします。",[13,340,341],{},"作成したLaravelアプリについての説明・構築は今回の記事ではしません。Herokuへのデプロイがメインになります。",[70,343,345],{"id":344},"なぜheroku","なぜHeroku??",[13,347,348,349],{},"今回のプロジェクト自体がまだ試験的であることも理由の一つですが、単にVPSとかで構築するのが面倒だったからです。 ",[286,350,351],{},"各種ミドルウェア やソフトが最新版の物であっても、マニュアルがあってもセキュリティや権限の設定とかを考えて構築すると日が暮れます。",[13,353,354],{},"Herokuの理念が",[26,356,358,359],{"className":357},[29,30],"\nHeroku はアプリの構築、提供、監視、スケールに役立つクラウドプラットフォームで、アイデアを出してから運用を開始するまでのプロセスを迅速に進めることが可能です。また、インフラストラクチャの管理の問題からも解放されます。\n",[360,361,362],"small",{},[363,364,365],"i",{},[366,367,368],"a",{"href":368,"target":369},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-feature-settings","_blank",[13,371,372],{},"とあるようにインフラの構築や管理は面倒です。そのため予めインフラがすぐに作られ、しかしある程度カスタマイズが可能なサービスを利用すると開発者としてはアプリ（今回でいうLaravelアプリ）の開発に注力できます。",[13,374,375],{},"またVPSでも可能だと思いますが、GitHubとかと連携して本番環境・開発環境を構築できるのも魅力の一つです。まだ試験的な段階なので、AWSやVPSほどの自由度は今回のアプリではいらないかな？と思いHerokuにしました。",[59,377,379],{"id":378},"herokuで構築した開発運用フロー","Herokuで構築した開発・運用フロー",[13,381,382],{},"下図のような感じです。バージョン管理などはGitHubを用いています。適宜、リモートリポジトリにpushしたらその変更が自動でHerokuのアプリ（個々のサーバーみたいなものだと思ってください。）に反映されます。",[384,385],"image-render",{":src":386,":width":387},"'_mix\u002Fheroku_archtecture-768x446.jpg'","'100%'",[13,389,390,391,394],{},"プルリクエストを送ると、 ",[286,392,393],{},"そのリクエストに応じたアプリが自動的に構築されるように設定もできます。"," Stagingで最終確認をしてOKであれば公開環境にデプロイさせます。",[13,396,397],{},"そのため今回の記事では以下のような流れで構築してます。",[399,400,401,404,407,410,413,416,419,422,425,428],"ol",{},[108,402,403],{},"Herokuのアカウント作成、アプリの作成",[108,405,406],{},"Herokuパイプラインの作成",[108,408,409],{},"Herokuアプリの設定",[108,411,412],{},"HerokuとGithubの連携",[108,414,415],{},"DBとの連携",[108,417,418],{},"環境変数の設定",[108,420,421],{},"Laravelアプリでのmigrationなど",[108,423,424],{},"本番環境との連携",[108,426,427],{},"SSL化する",[108,429,430],{},"API呼び出し確認",[59,432,434],{"id":433},"herokuへのデプロイ作業を開始","Herokuへのデプロイ作業を開始",[70,436,438],{"id":437},"herokuのアカウントを作成","Herokuのアカウントを作成",[13,440,441,442,445,449],{},"当たり前ですがHerokuでのアカウントを作成します。これがないと何も始まりません。 ",[366,443],{"href":444,"target":369},"https:\u002F\u002Fjp.heroku.com\u002F",[366,446,444],{"href":444,"rel":447},[448],"nofollow","にアクセスして「新規登録」に進みます。",[384,451],{":src":452,":width":387},"'_mix\u002Fheroku-1.png'",[13,454,455],{},"名前やアドレスなど適宜入力します。アカウントを作成する段階では日本語でも大丈夫です。選択するプランですがとりあえず無料の物にしておきましょう。",[13,457,458,462],{},[366,459,460],{"href":460,"rel":461},"https:\u002F\u002Fjp.heroku.com\u002Fpricing",[448]," にてプランの内容や価格を知ることができます。完全フリーの場合はSSL(httpsにするやつ)の設定が行えない、最低限のスペックしかないなど本当に試験的にサーバー上にアップする程度に使用します。",[13,464,465],{},"商用で運用する場合は有料のStandardなどにアップグレードしましょう。ここでは開発サーバーをフリー版、本番環境をhobbyにしておきます。",[70,467,469],{"id":468},"herokuアプリを作成する","Herokuアプリを作成する。",[13,471,472,473,476],{},"今回デプロイするLaravelのソース達を入れる、Herokuアプリを作成します。 ",[286,474,475],{},"Herokuアプリというのは簡単にいうとサーバーそのものだと思ってください。"," Herokuアプリに、使用するソフトやドキュメントルートの設定、環境変数の設定、連携するGithubのレポジトリなどの設定を行うことで、Laravelが正常に動いてアプリケーションサーバー（サービスを提供するサーバー）として機能するようになります。",[13,478,479],{},"ここでは実務の開発体制をとるのでpipelineを構築します。",[481,482,484],"h4",{"id":483},"pipe-linesを構築する","pipe linesを構築する",[13,486,487,490],{},[286,488,489],{},"pipe linesというのは「開発、レビュー、ステージング、本番」など複数の段階に分けてアプリを動かすことができるHerokuアプリのグループのことをいいます。"," もう少し簡単にいうと、",[13,492,493],{},"修正した物開発中のものをテストする「開発サーバー」、お客さんが触り実際にサービスが提供される「本番サーバー」を同時に構築して管理しやすくしたアプリ達です。今回は開発用・確認用、本番の２つの構成にします。",[13,495,496],{},"アカウントを作ると個人のダッシュボード画面に移動します。そこの「New」をクリックし、[Create New pipeline」を選択します。",[384,498],{":src":499,":width":387},"'_mix\u002Fheroku_createnew-1024x306.png'",[13,501,502],{},"pipelineを作成すると、pipelineの名前と連携するリポジトリを選ぶことができます。ここではまだ連携しないので、名前だけ入力して「create pipeline」で作成。すると二つのアプリを加えることができるpipelineが作成されました。",[384,504],{":src":505,":width":387},"'_mix\u002Fdashnoard-1024x262.png'",[13,507,508,509,512],{},"そしてたらアプリの構築をしていきます。二つ作るのは少し面倒ですが仕方ないです。では ",[286,510,511],{},"開発の方（staging）"," から作成していきます。「Add app」をクリックすると、既存のアプリを追加するか、新しく作るかを聞いてきます。ここでは「create new app」を選択。すると右側にアプリの基本情報を入力する欄が出てきます。",[13,514,515],{},"そしたらアプリの名前とリージョンを選択して「create app」します。フリープランの場合はアメリカかヨーロッパリージョンしか選べませんが、特に問題ないです。（その地域に隕石が落るとかしてサーバーが物理的にやられない限り）",[13,517,518],{},"アプリ名を英語で入力して「create」をクリックして作成されます。名前はとりあえず「staging-app-laravel」としておきます。",[70,520,522],{"id":521},"build-packを設定する","Build packを設定する",[13,524,525],{},"開発用アプリの設定が可能になったのでダッシュボードから、アプリ名をクリックして移動します。すると下のようなアプリに関する設定ができる画面に移ります。設定画面でできることは後で使用するheroku CLIでも行うことができます。今回はGUIの方をつかっていきます。",[384,527],{":src":528,":width":387},"'_mix\u002Fapp_setting_dev-1024x497.png'",[13,530,531,532,535],{},"まずは ",[286,533,534],{},"一番最初にbuild packというものを設定"," します。build packではnode.js,PHPなどを選択します。まあ使うサーバーサイドの言語を選ぶ物だと思ってください。上記の画面から「Settings」を選択します。",[13,537,538],{},"「Buildpacks」という項目があるので「Add builpack」でパックを追加します。",[384,540],{":src":541,":width":542,":center":543},"'_mix\u002Fbuldpack-300x222.png'","'500px'","true",[13,545,546],{},"LaravelなのでPHPは必須です。そしてnode modulesもあるのでnode.jsも入れます。ここでサーバーサイドの言語を複数追加すれば各言語でアプリを動かすことができます。",[70,548,550],{"id":549},"githubと連携してソースを入れる","Githubと連携してソースを入れる",[13,552,531,553,556],{},[286,554,555],{},"Laravelアプリケーションのソースをこのアプリにぶち込む必要があります。"," herokuではGithubとの連携がオススメされているので、今回はその方法で行きます。上記画面から「Deploy」をクリックして移動します。",[384,558],{":src":559,":width":387},"'_mix\u002Fdeply_set-1024x257.png'",[13,561,562],{},"deployment method でGithubを選びます。すると連携するリポジトリ名を入力する欄が出現します。もし初めてherokuを触ってgithubと連携していない場合は「githubと連携する？」みたいな物が表示されたはずなので、言われる通りに連携します。",[13,564,565],{},"githubのアカウントを持っていてログイン状態が保持されていれば、githubの連携許可画面が表示されます。それで簡単に連携ができます。",[13,567,568],{},"連携が完了すると下のようにデプロイに関する設定が出てきます。githubを用いる場合は２通りのデプロイがあります。",[105,570,571,574],{},[108,572,573],{},"ブランチを指定して手動でデプロイ",[108,575,576],{},"ブランチに変化があったら自動でデプロイ",[13,578,579],{},[286,580,581],{},"毎回herokuにログインするのも面倒なので「Enable Automatic Deploys」を選択して自動デプロイができるようにしておきます。",[384,583],{":src":584,":width":387},"'_mix\u002Fautodeploy-1024x421.png'",[13,586,587],{},"リポジトリにソースをプッシュすると以下のようにbuildしているのがダッシュボードで見ることができます。（たまに更新ボタンを押さないと表示されない時がある。）",[384,589],{":src":590,":width":542,":center":543},"'_mix\u002Fbuildings-300x166.png'",[13,592,593],{},"しかしまだDBとの連携や環境変数の設定が済んでいないので、アプリをみたところで500エラーしか表示されません。次はDBの設定に移ります。",[70,595,597],{"id":596},"jawsdbを設定する","JawsDBを設定する",[13,599,600,601,605,606,609],{},"herokuでは",[602,603,604],"code",{},"Procfile"," を用いてドキュメントルート やwebサーバー&phpの設定ができますが、DBに関してはアドオンを利用する必要があります。herokuではpostgreSQLの使用を進めていますが、私が作成したLaravelアプリはmysql仕様で作っていたので ",[286,607,608],{},"今回はmysqlをDBとして使用します。","（まあpostgreSQLに変更もできましたけど…）",[70,611,613],{"id":612},"使用するdbのアドオンについて","使用するDBのアドオンについて",[13,615,616],{},"ちなみに、「heroku mysql DB」と検索すると **「ClearDB」というmysqlベースのDBアドオンを入れるように書かれた記事が多いですが、私はそこでハマった物がありました。**以下に記述しておきます。",[481,618,620],{"id":619},"laravel-55以上の場合cleardbの使用はおすすめしない理由","Laravel 5.5以上の場合、ClearDBの使用はおすすめしない理由",[13,622,623],{},"ClearDBを用いててデータベースへマイグレーションをおこなった際に。こんなエラーが発生。",[625,626,630],"pre",{"className":627,"code":628,"language":629,"meta":242,"style":242},"language-bash shiki shiki-themes material-theme-ocean","php artisan migrate\n...\n...\nSQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))\nSQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes\n","bash",[602,631,632,648,654,658,767],{"__ignoreMap":242},[633,634,637,641,645],"span",{"class":635,"line":636},"line",1,[633,638,640],{"class":639},"s5Dmg","php",[633,642,644],{"class":643},"sfyAc"," artisan",[633,646,647],{"class":643}," migrate\n",[633,649,650],{"class":635,"line":246},[633,651,653],{"class":652},"sdLwU","...\n",[633,655,656],{"class":635,"line":243},[633,657,653],{"class":652},[633,659,661,664,667,670,673,676,679,683,686,689,692,695,698,702,705,707,710,713,716,719,723,726,729,732,735,738,741,744,746,749,751,754,756,759,761,764],{"class":635,"line":660},4,[633,662,663],{"class":639},"SQLSTATE[42000]:",[633,665,666],{"class":643}," Syntax",[633,668,669],{"class":643}," error",[633,671,672],{"class":643}," or",[633,674,675],{"class":643}," access",[633,677,678],{"class":643}," violation:",[633,680,682],{"class":681},"sx098"," 1071",[633,684,685],{"class":643}," Specified",[633,687,688],{"class":643}," key",[633,690,691],{"class":643}," was",[633,693,694],{"class":643}," too",[633,696,697],{"class":643}," long",[633,699,701],{"class":700},"sAklC",";",[633,703,704],{"class":639}," max",[633,706,688],{"class":643},[633,708,709],{"class":643}," length",[633,711,712],{"class":643}," is",[633,714,715],{"class":681}," 767",[633,717,718],{"class":643}," bytes",[633,720,722],{"class":721},"s0W1g"," (SQL: ",[633,724,725],{"class":643},"alter",[633,727,728],{"class":643}," table",[633,730,731],{"class":700}," `",[633,733,734],{"class":639},"users",[633,736,737],{"class":700},"`",[633,739,740],{"class":639}," add",[633,742,743],{"class":643}," unique",[633,745,731],{"class":700},[633,747,748],{"class":639},"users_email_unique",[633,750,737],{"class":700},[633,752,753],{"class":700},"(",[633,755,737],{"class":700},[633,757,758],{"class":639},"email",[633,760,737],{"class":700},[633,762,763],{"class":700},")",[633,765,766],{"class":721},")\n",[633,768,770,772,774,776,778,780,782,784,786,788,790,792,794,796,798,800,802,804,806],{"class":635,"line":769},5,[633,771,663],{"class":639},[633,773,666],{"class":643},[633,775,669],{"class":643},[633,777,672],{"class":643},[633,779,675],{"class":643},[633,781,678],{"class":643},[633,783,682],{"class":681},[633,785,685],{"class":643},[633,787,688],{"class":643},[633,789,691],{"class":643},[633,791,694],{"class":643},[633,793,697],{"class":643},[633,795,701],{"class":700},[633,797,704],{"class":639},[633,799,688],{"class":643},[633,801,709],{"class":643},[633,803,712],{"class":643},[633,805,715],{"class":681},[633,807,808],{"class":643}," bytes\n",[13,810,811],{},"ローカルでは起きなかった謎のエラー。「上限は767bytesだけど、1071bytesのキーが設定されている」と怒っている。とりあえずmigrationが中途半端にUserテーブルだけ作って止まってしまったので、migrationをリフレッシュする。",[625,813,815],{"className":627,"code":814,"language":629,"meta":242,"style":242},"php artisan migrate:fresh\n",[602,816,817],{"__ignoreMap":242},[633,818,819,821,823],{"class":635,"line":636},[633,820,640],{"class":639},[633,822,644],{"class":643},[633,824,825],{"class":643}," migrate:fresh\n",[13,827,828],{},"このエラーを調べたところどうやら使用した「ClearDB」のmysqlが5.5と古い上に、Laravelで設定していたmysqlで用いる文字コードとの関係で起きていた。以下のQiita記事が非常に参考になった。",[26,830,833,834],{"className":831},[29,832],"alert-info","\n    ",[366,835,837],{"href":836,"target":369},"https:\u002F\u002Fqiita.com\u002Fbeer_geek\u002Fitems\u002F6e4264db142745ea666f","Laravel5.4以上、MySQL5.7.7未満 でusersテーブルのマイグレーションを実行すると Syntax error が発生する",[13,839,840],{},"対処は２つ。",[105,842,843,846],{},[108,844,845],{},"mysqlのバージョンを上げて5.7にする。",[108,847,848],{},"文字コードを上限を超えないものに変更する。",[13,850,851],{},"今回の場合はmysqlのバージョンを上げる方にした。しかしこちらのStackOver Flow にもあるようにClear DBで用いられているmysqlのバージョンを上げるのは無理らしい。。",[26,853,833,855],{"className":854},[29,832],[366,856,858],{"href":857,"target":369},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F56253354\u002Fhow-to-update-the-version-of-the-mysql-engine-in-cleardb","How to update the version of the MySQL engine in ClearDB?\n    ",[13,860,861,862,866],{},"代わりに",[366,863,865],{"href":864,"target":369},"https:\u002F\u002Felements.heroku.com\u002Faddons\u002Fjawsdb","「JawsDB」","というのを使うとmysqlのバージョンが5.7のものが入ってくれる。",[13,868,869],{},"herokuでのmysql導入を調べると「ClearDBを入れろ」という記事が多く、言われたままにやったら起きたのでハマりポイントでした。",[70,871,873],{"id":872},"jawsdbアドオンを入れる","jawsDBアドオンを入れる",[13,875,876,877],{},"アドオンはherokuの追加機能のような物です。「Resources」を選ぶと「Add-ons」という項目がありそこでアドオンを導入できます。jawsDBと入力するとすぐに出てきます。 ",[286,878,879],{},"「jawsDB MySQL」を選択して追加。",[384,881],{":src":882,":width":542,":center":543},"'_mix\u002Fjawsdb-300x248.png'",[13,884,885],{},"データ容量などに応じたプランを選ぶことができます。ここではFreeでおk。「Provision」をクリックしてアプリに追加します。",[70,887,889],{"id":888},"dbの接続情報を手に入れる","DBの接続情報を手に入れる",[13,891,892],{},"このjawsDBはherokuのアプリ内（というかサーバー）に組み込まれている訳ではないので、ホストやポートなどを指定する必要があります。jawsDBを導入するとそのherokuアプリを結びついたデータベースが作成されます。",[13,894,895],{},"その情報はアドオンのページで、jawsDBの箇所がリンクになっているのでそこをクリックします。",[384,897],{":src":898,":width":542,":center":543},"'_mix\u002Faddons-768x194.png'",[13,900,901],{},[286,902,903],{},"するとDBへの接続情報が書かれた画面が表示されます。ここに接続先ホスト、ユーザー名、パスワードなどが書いてあるので控えておきます。",[384,905],{":src":906,":width":387},"'_mix\u002Fjawsdashboard-768x360.png'",[13,908,909],{},"自前のmysqlコマンドやクラアントから普通にアクセスすることができます。では次にこれらの情報を元に環境変数を設定します。後少しでアプリがデプロイされます！頑張ってください！",[70,911,913],{"id":912},"config-bars環境変数を設定","config bars(環境変数)を設定",[13,915,916],{},"DBの接続情報を手に入れたのでLaravel内で使用される環境変数を定義していきます。Laravelのファイル群に「.env」というのがあったと思います。そのファイルは環境変数を定義しており、DBのパスワード、APIキーなど重要な値や環境によって変化する値が格納されています。",[13,918,919,920],{},"基本的には.envはgitでは管理せず、githubにはプッシュされないように除外してあります。",[286,921,922],{},"ローカルとherokuではDBの接続情報も違うので異なる環境変数を設定する必要がります。",[13,924,925,926,929],{},"そのために ",[286,927,928],{},"「Settings」の「config bars」にて環境変数を設定","できます。Laravelの.envを開いて必要な項目をコピーして適宜適切な値を入れておきましょう。",[384,931],{":src":932,":width":387},"'_mix\u002Fconfigure-768x115.png'",[70,934,935],{"id":935},"マイグレーションを行う",[481,937,939],{"id":938},"heroku-cliを入れる","heroku CLIを入れる",[13,941,942,943,947],{},"環境変数の設定を終えればLaravelのマイグレーションが使えるようになります。heroku CLIを用いてアプリをBashで操作します。ローカルに",[366,944,946],{"href":945,"target":369},"https:\u002F\u002Fdevcenter.heroku.com\u002Farticles\u002Fheroku-cli","heroku CLI","をダウンロードします。",[481,949,950],{"id":950},"アプリをbashから操作する",[13,952,953],{},"macならターミナルを開いてログインをします。",[625,955,960],{"className":956,"code":958,"language":959},[957],"language-text","~ % heroku login\nheroku: Press any key to open up the browser to login or q to exit:[Enter]\nOpening browser to https:\u002F\u002Fcli-auth.heroku.com\u002Fauth\u002Fcli\u002Fbrowser\u002F********\nLogging in... done\nLogged in as your@email.com\n","text",[602,961,958],{"__ignoreMap":242},[13,963,964],{},"ブラウザがいったん開いてログインが完了です。そしたらアプリをbashで操作します。以下のコマンドを唱えます。",[625,966,969],{"className":967,"code":968,"language":959},[957],"~ % heroku run bash -a staging-app-laravel\nRunning bash on ⬢ staging-app-laravel... done\n",[602,970,968],{"__ignoreMap":242},[13,972,973,976],{},[286,974,975],{},"「-a」でアプリ名を指定できます。バッシュの時はアプリ名を指定しないと怒られます。"," すると表示が少し変わりバッシュ操作が可能になります。",[13,978,979,980,983],{},"ホームディレクトリ 内にLaravelのソース達が配置されているのが確認できます。このLaravelアプリのルートで ",[602,981,982],{},"php artisan","を唱えることができます。それ以外のディレクトリなどで行うと「そんなコマンド知らんよ」と怒られます。ではマイグレーション。",[625,985,988],{"className":986,"code":987,"language":959},[957],"~ $ php artisan migrate\n**************************************\n*     Application In Production!     *\n**************************************\n\n Do you really wish to run this command? (yes\u002Fno) [no]:\n > yes\n\nMigration table created successfully.\nMigrating: 2014_10_12_000000_create_users_table\nMigrated:  2014_10_12_000000_create_users_table (0.06 seconds)\nMigrating: 2014_10_12_100000_create_password_resets_table\nMigrated:  2014_10_12_100000_create_password_resets_table (0.05 seconds)\nMigrating: 2016_06_01_000001_create_oauth_auth_codes_table\nMigrated:  2016_06_01_000001_create_oauth_auth_codes_table (0.09 seconds)\nMigrating: 2016_06_01_000002_create_oauth_access_tokens_table\nMigrated:  2016_06_01_000002_create_oauth_access_tokens_table (0.09 seconds)\nMigrating: 2016_06_01_000003_create_oauth_refresh_tokens_table\nMigrated:  2016_06_01_000003_create_oauth_refresh_tokens_table (0.06 seconds)\nMigrating: 2016_06_01_000004_create_oauth_clients_table\nMigrated:  2016_06_01_000004_create_oauth_clients_table (0.05 seconds)\nMigrating: 2016_06_01_000005_create_oauth_personal_access_clients_table\nMigrated:  2016_06_01_000005_create_oauth_personal_access_clients_table (0.02 seconds)\nMigrating: 2019_08_19_000000_create_failed_jobs_table\nMigrated:  2019_08_19_000000_create_failed_jobs_table (0.03 seconds)\n...#自分で設定した他のテーブルも無事マイグレーションされた。\n",[602,989,987],{"__ignoreMap":242},[13,991,992],{},"これでDBに必要なテーブルが設定されました。ユーザーテーブルに私たちが管理するための管理ユーザーを作成するシーダーを予め作成したおいたのでそれも実行。",[625,994,997],{"className":995,"code":996,"language":959},[957],"~ $ php artisan db:seed\n",[602,998,996],{"__ignoreMap":242},[13,1000,1001],{},"これでDBにもテーブルが挿入されたのでアプリが動くようになりました。",[70,1003,1005],{"id":1004},"herokuアプリをブラウザで開く","Herokuアプリをブラウザで開く",[13,1007,1008,1009],{},"ブラウザのHerokuの画面に戻り、pipe lineの一覧を開きます。 ",[286,1010,1011],{},"開発アプリの「Open app」をクリックすると構築したLaravelアプリの画面が表示されました。",[13,1013,1014],{},"「500 Internal ServerError」などが表示されている場合は以下の４つを確かめましょう。",[399,1016,1017,1020,1023,1026,1029],{},[108,1018,1019],{},"$ heroku logs --tail -a your_app_name でログを確かめる。",[108,1021,1022],{},"Laravelアプリそのものにミスはないか？",[108,1024,1025],{},"環境変数の設定はあっているか？",[108,1027,1028],{},"DBに接続されているか？DBのテーブルの設定は正しいか？",[108,1030,1031],{},"ビルドのログを確かめてビルドが失敗していないか？",[13,1033,1034],{},"アプリのビルドが成功している場合はサーバー自体は構築できています。Laravelアプリや環境変数などに問題ある可能性が高いので確認してみましょう。",[70,1036,1038],{"id":1037},"次は本番のアプリ","次は本番のアプリ！！",[13,1040,1041],{},"ここまでもかなりボリューミーですが、今回は２つアプリを入れたので２つ目も設定します。ですがやることは開発の方でやったように",[105,1043,1044,1047,1050,1053],{},[108,1045,1046],{},"ビルドパックを入れる",[108,1048,1049],{},"アドオンを入れる",[108,1051,1052],{},"環境変数を設定する",[108,1054,1055],{},"DBと接続してマイグレーションする",[13,1057,1058],{},"ぐらいです。そして私の運用ではgithubと本番のアプリは連携させず、stagingのアプリを本番に移行するので少し手間が省けます。stagingのものを本番に移行する場合はpipelineの画面で「promote to production」を選択すればすぐに反映されます。",[70,1060,1062],{"id":1061},"本番サーバーのssl化","本番サーバーのSSL化",[13,1064,1065],{},"最後に本番サーバーのSSL化です。無料プランのは自動でSSLは付与されません。証明書があれば付与することができますが無料のdynoはスペックが最低限な上、証明書取得でもお金がかかるので大人しくhobbyプラン以上の有料版にアップグレードしましょう。",[13,1067,1068],{},"本番アプリをhobbyプランに上げるとACM（自動証明書管理）が有効になり、証明書が発行できて有効になってます。SSL化はこれだけです。込み入った証明書や独自ドメイン の付与の際には少し設定が必要です。",[70,1070,1072],{"id":1071},"apiサーバーとして機能しているかを確かめる","APIサーバーとして機能しているかを確かめる",[13,1074,1075],{},"とりあえず本番環境までのデプロイが完了しました。Laravel Passport を用いて認証付きAPIを投げられるのでそのチェックをしてみます。とその前にlaravel passportの設定上必要なものがあるのでアプリ内にbashで入って以下を実行。",[625,1077,1080],{"className":1078,"code":1079,"language":959},[957],"~ $ php artisan passport:install\n",[602,1081,1079],{"__ignoreMap":242},[13,1083,1084],{},"Laravel Passport を用いて認証付きAPIを投げられるのでそのチェックをしてみます。シーダーで作成した管理ユーザーでログインします。Laravel Passport ではユーザーごとのアクセストークンが発行できるので、それを作成。（トークン取得画面のUIなどは適宜作成してください。Laravel側でも用意されています。）",[384,1086],{":src":1087,":width":542,":center":543},"'_mix\u002Fapis-768x841.png'",[13,1089,1090],{},"アクセストークンを発行して手元にメモしておきます。「Talend API Tester」というChrome拡張機能を使ってこのHerokuアプリ宛にAPIを投げてみます。",[13,1092,1093],{},"アプリのドメイン名が表示されているのでコピー。外部からのAPIアクセスの際にはAPIキーをリクエストヘッダーに仕込んで送ると受け取る設定になっています。まずはAPIキーなして投げると、",[384,1095],{":src":1096,":width":387},"'_mix\u002Fapi_test_01-1-768x330.png'",[13,1098,1099,1100,1103],{},"おっ！401 Unauthorized が戻ってきました。 ",[286,1101,1102],{},"とりあえず指定のAPIルーティングは存在して、リクエストが受け取れています。つまりAPIサーバーとして機能していることがわかります。"," ではヘッダに先ほどのキーを仕込んで、また諸所の設定値も入れて再度投げると、",[384,1105],{":src":1106,":width":387},"'_mix\u002Fapitest_02-768x438.png'",[13,1108,1109],{},"200 OK が返りました。プレビューを見るとJSONでのデータが戻ってきているので成功です。これでHerokuにLaravelで開発したAPIサーバー及び管理アプリを構築することができました。このサーバーに認証キー付きAPIを投げることでデータを取得できます。",[70,1111,1113],{"id":1112},"終了","終了〜〜〜",[13,1115,1116],{},"以上がherokuにlaravel で作成したAPIサービスを構築する手順でした。めちゃくちゃ長い記事になりましたが、VPSならもっと長くなっています笑。githubやSSL化そして他の管理を気にせず簡単にデプロイできるのでherokuが人気なのもわかります。Xserverとかは異なってスケーラブルでnodeとかpythonとかも入れられ、githubで管理できるのは大きいです。",[1118,1119,1120],"style",{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":242,"searchDepth":243,"depth":243,"links":1122},[1123,1127,1128],{"id":292,"depth":246,"text":293,"children":1124},[1125,1126],{"id":317,"depth":243,"text":318},{"id":344,"depth":243,"text":345},{"id":378,"depth":246,"text":379},{"id":433,"depth":246,"text":434,"children":1129},[1130,1131,1134,1135,1136,1137,1140,1141,1142,1143,1147,1148,1149,1150,1151],{"id":437,"depth":243,"text":438},{"id":468,"depth":243,"text":469,"children":1132},[1133],{"id":483,"depth":660,"text":484},{"id":521,"depth":243,"text":522},{"id":549,"depth":243,"text":550},{"id":596,"depth":243,"text":597},{"id":612,"depth":243,"text":613,"children":1138},[1139],{"id":619,"depth":660,"text":620},{"id":872,"depth":243,"text":873},{"id":888,"depth":243,"text":889},{"id":912,"depth":243,"text":913},{"id":935,"depth":243,"text":935,"children":1144},[1145,1146],{"id":938,"depth":660,"text":939},{"id":950,"depth":660,"text":950},{"id":1004,"depth":243,"text":1005},{"id":1037,"depth":243,"text":1038},{"id":1061,"depth":243,"text":1062},{"id":1071,"depth":243,"text":1072},{"id":1112,"depth":243,"text":1113},[1153],"devstack","2020-07-07",{},"\u002Farticles\u002Flalavel7-deplay-on-heroku",{"title":276,"description":276},"articles\u002Flalavel7-deplay-on-heroku",[640,1160,271],"laravel","_mix\u002Fheroku_archtecture-768x446.jpg","i3Z8K7cn-JUTupKxFl5lgfnHLhl9EAJPK97f9yd7CX0",1780987148288]