【のんラボ】DockerのインストールとPHPの動作環境構築【学生向け】

2021/02/20 2021/02/28 #のんラボ #開発環境 #環境構築 #Docker #学生向け

DockerのインストールとPHPの動作環境構築

こんにちは。Nonです。

今回は「のんラボ」用の環境構築について書こうと思います。どちらかというとドキュメントチックになってしまうかもしれません。

YouTube動画

YouTubeチャンネル

Dockerのインストール

Windows

スクリーンショット 2021-02-20 13.52.46.png

からDockerをダウンロード

インストーラーを起動すると、設定を起動されますが、デフォルトのまま進みましょう。

スクリーンショット 2021-02-20 13.55.41.png

インストールには結構時間がかかるようです。
終了したらPCの再起動を求められるので再起動しましょう。

スクリーンショット 2021-02-20 14.34.48.png

私の環境ですが、Dockerをインストールしたあとにネットワーク関連のエラーが発生してしまいました。エラーメッセージはエラーの内容で変わりますが、私の環境ではLinuxカーネルの更新を求められました。

スクリーンショット 2021-02-20 20.19.35.png

ダウンロードとインストールが完了したらDockerが起動します。

スクリーンショット 2021-02-20 20.19.52.png

この画面では特に操作は必要ありません。「Skip tuotrial」をクリックして完了しましょう。

ついでに、Windowsなら右下のタスクバー、Macなら右上のメニューバーにクジラのマークが表示されます。表示されていなかったらアプリを起動しておきましょう。

スクリーンショット 2021-02-20 20.22.12.png

スクリーンショット 2021-02-28 0.50.05.png

最後に、ターミナル(コマンドプロンプトやPowerShell)を開いて下記のコマンドを実行して成功したら完了です。

docker -v

スクリーンショット 2021-02-21 0.28.36.png

また、どこかのタイミングで、このような画面が表示されるかもしれませんが、これはセキュリティ許可をするものなので、「許可する」で大丈夫です。

スクリーンショット 2021-02-20 21.02.33.png

Mac

インストールは画面の指示に従っていればちゃんとインストールできているはずです。

ターミナルを開いて下記のコマンドを実行して成功したら完了です。

docker -v

スクリーンショット 2021-02-20 23.49.06.png

共通

少し難しいかもしれませんが、日本語化プロジェクトのリンクを貼っておきます。

GitHubからプロジェクトをダウンロード

環境構築用GitHub

上記のページに下図のようなボタンがあるので、ここの「Download ZIP」をクリック

スクリーンショット 2021-02-20 20.22.57.png

動画の通り、下のようなファイルが取得できますので、こちらのドキュメントフォルダなどに移動します。このへんは自分のやりやすいようにして貰えればいいと思います。

スクリーンショット 2021-02-20 20.23.16.png

最後にVSCodeでプロジェクトを開いてみましょう。

スクリーンショット 2021-02-28 0.53.31.png

ここの「Open folder」をクリックして、ダウンロードしてきた「non-labo-ch-main」フォルダを選択しましょう。

スクリーンショット 2021-02-28 0.54.40.png

選択したらこのようになるので、「Control + @」を押しましょう。VSCodeでターミナルを起動することができます。

スクリーンショット 2021-02-20 20.46.29.png

ターミナルが開いたら

cp docker-compose.yml.example docker-compose.yml

を実行します。

↓のように、新しい docker-compose.yml が作成されればOKです。

スクリーンショット 2021-02-20 20.51.00.png

次は

docker-compose build

を起動します。

スクリーンショット 2021-02-20 20.54.54.png

結構時間かかるので、気長に待ちましょう。

ビルドができたらDockerコンテナの起動ができるようになります。

docker-compose up -d

で、起動してみましょう。

スクリーンショット 2021-02-20 21.04.49.png

done がズラリと並んだら成功です。試しにブラウザで動作を確認してみましょう。

http://localhost にブラウザでアクセスしてみて下さい。↓のリンクをクリックしても大丈夫です。

スクリーンショット 2021-02-20 21.06.31.png

Hello World が表示されればOKです。

最後に

設定できたでしょうか?

こちらもDockerのインストールさえできてしまえばWindowsでもMacでも利用するコマンドは同じです。

何かわからなければ質問用のフォームに質問するか、YouTubeのコメント欄にでも書いておいて下さい。できるだけ返信するようにします。

関連リンク集

.

のん

所属 : 株式会社スマレジ 開発部

YouTube : のんラボ

Twitter : @nonz250

Github : nonz250

Qiita : @nonz250

My Qiita posts My Qiita contributions My Qiita followers

主にPHPを使用し、サーバーサイドを担当。最近はフロントにも興味津々。

なにかを作ったりいじったりするのが好きで、個人開発なども行っている。

趣味はバイクアイコン画像は大抵愛車の「Z250」である。友達にアイコン描いてもらえて嬉しい。

PHP / Laravel / CakePHP2 / CakePHP3 / Vue / Nuxt / C# / etc...

Tags

#のんラボ #Laravel #Vue #個人開発 #ブログ #プログラミング #javascript #Html5 #WEBサービス #Twitter #今年の抱負メーカー #勉強方法 #PWA #モバイルアプリ #Android #ツーリング #バイクに乗るエンジニア #Z250 #秋吉台 #能登半島 #バイク #冒険 #東尋坊 #Squid #リバースプロキシ #hosts #axios #cropper #AdSense #Bootstrap #MySQL #高速化 #トドTask #Telescope #デバッグ #composer #テスト #セキュリティ #POSレジ #スマレジ #本部機能 #バリデーション #入力チェック #Mac #Chrome #テスト駆動開発 #開発手法 #UI #デザイン #WEBサイト #機能美 #PHP #Laravel 6 #コメント #バージョンアップ #vue-cli #localhost #BIツール #売上分析 #TANAX #MFK250 #ツアーシェルケース2 #RESTful #API #REST API #実務的 #PHP Tech Tutor #Smaregi Tech Talk #勉強会 # ブログ #CakePHP3 #CSRF #VSCode #開発環境 #CakePHP3.0 #さくらのレンタルサーバー #モジュールモード #シェル #メール #Gmail #relay #OGP #エラーページ #抱負 #家庭教師 #ドメイン駆動設計 #DDD #読書会 #那智の滝 #伊勢志摩 #伊勢志摩スカイライン #フロント #三方五湖 #レインボーライン #ボーイスカウト・ルール #プログラマが知るべき97のこと #リファクタリング #ユビキタス言語 #車輪の再発明 #マイクロサービス #デプロイ #QA #laravel-mix #Tips #storybook #@storybook/addon-actions #昇降デスク #コードレス #書斎 #オフィス #リモートワーク #働き方 #エラーハンドリング #スマレジ4 #pixel 5 #レビュー #スマレコ #TDD #RSS #404 #高山ダム #ラーツー #React #Nuxt #node_modules #エラー #インポート #設定方法 #環境構築 #Docker #フォレストパーク神野山 #学生向け #PR #採用 #Node.js #npm #しまなみ海道 #youtube #CSS #IE #SLA #Rust