MIS.W 公式ブログ

早稲田大学公認、情報系創作サークル「早稲田大学経営情報学会」(MIS.W)の公式ブログです!

Docker?Git?なにそれおいしいの?【新歓ブログリレー2021 9日目】

はじめに

どうも~100日後にオウルオルフェノクになるシロフクロウで~す。

仮面ライダー見すぎだろ!

大変失礼いたしました。新入生の皆さん初めまして。54代のプログラミング研究会会長のHarrisonKawagoe(@hrsnkwge_pro)でございます。

ところで、「Docker」や「AWS」みたいな単語を聞いたことありますか?
名前だけ聞いたことある人はそこそこいると思いますが、具体的にどういう風に使われているのかはご存知ですか?

自分がプログラミングの勉強を始めたばかりの頃、バージョン管理とコンテナ技術などは全然知らなくて、一番最初の環境構築で躓いたことがあります。
そしてようやく自力でコーディングできるようになったと思ったら、今度はチーム開発で先輩のコードを壊してしまいました。
実際の開発現場では、開発とシステムの管理を楽にする為に、色んなツールを使っていることが多いです。

環境構築とソースコードの管理などは楽にできたらいいですよね。
今回は、アプリ開発とWeb開発の効率アップに役立つツールとサービスについて紹介していこうと思います。

Docker

Webサービスを運用する際によく悩まされるのは、サーバー環境とローカル環境の違いによる不具合です。
例えば、開発とテストをWindowsで行って、アプリをUbuntuのサーバーで運用する場合、パッケージを導入する方法はそれぞれ違うので、導入されるパッケージのバージョンが異なることはよくあります。
f:id:HarrisonKawagoe8111F:20210414142615p:plain

使用するライブラリーのバージョンの違いによっては、コードの互換性が無い場合があるので、本来ローカル環境で動くアプリが、サーバーにデプロイすると動かないこともあります。
また、OSによっては、プログラムをインストールする方法と実行方法も違ったりするので、環境設定でかなり手間かかることも十分ありえます。

?「なら最初から必要なものが揃ってる環境を用意すればいいのでは?」

言えば確かにそうですが、開発者の事情などを考慮すると、開発用のPCとサーバーのホスト環境を全く同じものにするのはほぼ不可能です。

環境構築やデプロイの失敗で悩まされていた人はかなり多く、サービスダウンの一つの理由になってたりはしましたが、とある技術の登場によって回避できるようになりました。

f:id:HarrisonKawagoe8111F:20210405214923p:plain

Dockerは、アプリケーションの実行環境を提供する為に作られたコンテナ型の仮想環境です。従来の仮想マシン(VirtualBoxなど)と比べてかなり高速かつ配布が容易な為、エンジニア界隈で注目を集めています。 Dockerでアプリを運用すると、下記のようになります: f:id:HarrisonKawagoe8111F:20210414144324p:plain

この図に書かれているコンテナは、ruby on railsやnginxなどのプログラムの実行環境を提供しています。コンテナに導入されるOSと必要なパッケージは、ソースコードと同じディレクトリに置いてあるDockerfileなどに指定されているので、Docker関連の設定ファイルは同じであれば、ホストマシンの環境に関係なく、全く同じコンテナが作成されます。
アプリをコンテナ化するメリット:

1.アプリの実行環境は統一されるので、ホストマシンの違いによる不具合が少なくなる
2.必要な設定やパッケージの導入は全部自動でやってくれるので、環境構築とサーバーへのデプロイがかなり楽になる

また、Github ActionsなどのCIと組み合わせて使った場合、ソースコードの変更を特定のブランチに反映した際にサーバーへのデプロイも自動でやってくれるので、非常に便利です。

コンテナ化されたアプリを実行する場合、初回に下記のコマンドを実行すると:

docker-compose build

必要なライブラリーの導入からコンテナの作成まで全部やってくれます。

そして、アプリの設定に問題が無ければ、下記のコマンドを実行すると:

docker-compose up

アプリが起動します。
f:id:HarrisonKawagoe8111F:20210405225030p:plain f:id:HarrisonKawagoe8111F:20210405225057p:plain たった2行のコマンドで実行環境の構築からアプリの実行まで全部できちゃうんですよ。凄くないですか?
チーム開発などでアプリをコンテナ化した場合、他のメンバーの環境構築がかなり楽になります。開発の効率が上がるだけではなく、予期せぬトラブルを減らすこともできます。

最近のエンジニア界隈では、Dockerを利用して開発することが当たり前なことになっています。DockerはWeb開発だけではなく、データ分析やIoTなどの分野でも使われたりするので、Dockerの導入方法及び基本的な使い方をおさえておくと良いでしょう。

Git&Github

チームで何かしらのモノを作る時は、作る部分によって仕事を振り分けるのが一般的ですよね。 チーム開発も同じです。しかし、みんなが書いたコードを手動で管理するのはかなり大変です。
また、ソースコードを昔のものに戻したい場合は、履歴が残っていないと困りますよね。

ソースコード管理はGitとGithubに任せましょう。

Git&Github「呼んだ?」

f:id:HarrisonKawagoe8111F:20210405231616p:plain f:id:HarrisonKawagoe8111F:20210405231650p:plain

一つ注意して欲しい点がありますが、

GitとGithubは全く違うものですよ!
Gitはローカルのソースコードの管理とリモートリポジトリとやりとりする役割を果たすツールであり、それに対しGithubソースコードをリモートで管理するために作られたサービスです。

Gitで管理されているリポジトリは、必要に応じてブランチを切ることができます。
f:id:HarrisonKawagoe8111F:20210405233234p:plain
f:id:HarrisonKawagoe8111F:20210414161032p:plain ブランチ同士は互いに干渉し合うことはない為、それぞれの状態を保つことができます。例えば、branch 2はbranch 1から分岐したブランチですが、branch 2に変更を反映しても、branch 1とその親であるmasterブランチに同じ変更が反映されることはありません。

チーム開発では、ブランチを分けて開発するのが一般的です。

特定のブランチへの変更は他のブランチへ影響を与えませんが、mergeコマンドあるいはpull requestを利用して、変更を他のブランチに反映させることも可能です。 親ブランチからの変更を現在の作業ブランチに反映する際はmergeを使うことが多いですが、新たの機能の開発あるいはバグの修正が終わった場合、Pull Requestを使ったほうが管理しやすくなります。 f:id:HarrisonKawagoe8111F:20210405233206p:plain f:id:HarrisonKawagoe8111F:20210414164337p:plain
まず、リポジトリの管理者がコードチェック(Code Review)を行います、コードに問題が無ければ、管理者によって親ブランチなど指定されたブランチにマージされます。一方、コードに問題があった場合、あるいはそもそもこの変更が必要で無い場合、Pull Requestを拒否することができます。

この手法はチーム開発(特に業務)でよく使われているので、これからチームで何かしらのアプリを作りたい人は、Pull requestを活用することをオススメします。

ソースコードの変更をリモートに保存した際は、履歴が残ります。ソースコードを過去の状態に戻したい場合は、git resetでロールバックできます。 f:id:HarrisonKawagoe8111F:20210405233742p:plain

GitとGithubは情報理工&通信学科の専門科目「アルゴリズムとデータ構造B」のチームワークなどでも使われたりするので、 ソースコード管理のスキルをちゃんと身につけましょう。

4/21の活動でGit/Github講座を行う予定です。興味ある人はぜひみすの活動に来てみてください!

Visual Studio Code

f:id:HarrisonKawagoe8111F:20210405234245p:plain Visual Studio CodeMicrosoftが開発したソースコードエディタでございます。
VSCodeの特徴は、プラグインがかなり充実していることと、エディタがかなり使いやすいことです。プラグインによっては、開発の効率を劇的に改善することができます。例えば、「HTML Preview」をインストールすると、HTMLの変更が右側の画面でリアルタイムで反映されるので、HTML&CSSの動作を確認しながらサイトの制作を効率よく進めることができます。 f:id:HarrisonKawagoe8111F:20210405234621p:plain

必要なランタイムさえあれば、VSCodeだけで開発を進められることが多いです。また、理工のプログラミングの授業でVSCodeを推奨してる先生が多く、VSCodeLaTeXを連携することでレポートの作成が楽になったりします。理工学部に所属していれば、誰でも入れるべきと言っても過言ではありません。

IDE(総合開発環境)

JavaやCなどの言語は、プログラムを実行する前に、ソースコードを一回まとめてコンパイルする必要があります。
ただ、ファイルが多くなると、コマンドも複雑になるので、プログラムを実行するたびにコマンドを叩くのは嫌ですよね。
特にAndroidアプリやWindowsアプリを開発する場合、依存しているライブラリーや設定ファイルなどが多く、設定とビルドを毎回手動でやると、開発速度が落ちてしまいます。
こんなめんどくさい仕事は、IDEに任せましょう。
IDE(総合開発環境)は、エディタ、ソースコードの自動ビルド機能、デバッグ機能が全て揃った開発環境のことです。
「ビルド」ボタンをクリックするだけで、ソースコードコンパイルから実行まで全部やってくれるので、非常に便利です。
特にWPFアプリやAndroidアプリなどのGUIアプリを作成する場合、GUI関連のツールがIDEについているので、IDEを使うとUIの実装と裏側の開発がかなり楽になります。
f:id:HarrisonKawagoe8111F:20210414170424p:plain

C/C++でプログラミングする場合、実行エラーが発生した問題箇所を特定するのはかなりめんどくさいですよね。IDEに付属しているデバッグツールを活用すると、特定の行の動作を見ることができるので、問題のコードを特定しやすくなります。
f:id:HarrisonKawagoe8111F:20210406000223p:plain

スマホアプリとデスクトップアプリに関しては、開発者が効率よくアプリの開発を進められる為に、プラットフォームを提供した会社がIDEを用意していることが多いです。例えば、Windowsアプリを開発したい場合、Microsoftが開発したVisual Studioを使うと便利です。
授業あるいは競技プログラミングなどでIDEを使いたい場合は、Jetbrains社が開発したIDEがオススメです。

f:id:HarrisonKawagoe8111F:20210406001658p:plain

Windows SubSystem on Linux(WSL)

GCCコンパイラなどCベースのプログラムやコンパイラの多くは、UNIX環境で動かすことが前提となっているので、Windowsでそのまま実行することができません。
f:id:HarrisonKawagoe8111F:20210406010316p:plain
本当は実機にLinuxを入れたほうが開発しやすいですが、Windowsとのデュアルブートを実現するには色々注意しないといけないことが多い為、今回は比較的に導入が楽なWSLを紹介します。
WSLは名前通り、Microsoftが開発したWindows上で実行するLinux環境でございます。
VirtualBox仮想マシンと違って、Windowsカーネルと連携しているので、環境の構築とファイルのアクセスは仮想マシンより簡単です。
また、GUI以外のLinux機能は全て搭載されているので、実機のLinux環境で動くプログラムのほとんどはWSLでも動きます。
Linuxには色んな種類があります。初めてLinuxを使う場合は、Ubuntuを使用することをオススメします。 f:id:HarrisonKawagoe8111F:20210414165049p:plain ] 理工のCプログラミングの授業ではLinux環境を使うので、これからCの授業を受ける人は、予めWSLの環境を準備しておきましょう。

docs.microsoft.com

MinGWを勧めるサイトはチラホラ見たりしますが、利用できる機能はWSLよりかなり限られている為、あんまりオススメしません。

AWS(Amazon Web Service)

昔は、Webサービスを立ち上げる為に、サーバーなどのインフラを自分で構築するのが一般的でしたが、AWSGCPなどのクラウドプラットフォームの出現より、Webサービスクラウド上で運用するのが主流となりました。
サーバーを自宅あるいは自社で走らせる場合、ハードウェアは色々工夫しないといけないし、電気代やDNSなどの要素も考えないといけないので、クラウドプラットフォームを使ったほうがだいぶ楽になりますよね。
クラウドプラットフォームで一番使われているのは、Amazon社が運営しているAWS(Amazon Web Service)です。
AWSは、アプリサーバーを走らせる為のクラウドプラットフォームだけではなく、機械学習モデルの基盤として使うことができるSageMakerや、ストレージサーバとして機能しているS3など、様々なサービスを提供しています。

aws.amazon.com

AWSWebサービスに必要なインフラがほとんど揃っているので、企業からかなり重宝されています。例えば、ニコ動みたいな動画共有サービスは、S3とEC2を使うと簡単に構築できます。

f:id:HarrisonKawagoe8111F:20210414180703p:plain

Heroku

AWSの無料期間は1年しか無いので、個人でWebサービスを運営する時に使うのは金銭面でちょっと厳しいですね。
自分は昔OwlJudgeというオンラインジャッジシステムをAWS EC2で運用していましたが、無料期間のことを完全に忘れてて、3週間で20ドル取られたことがあります(泣)
個人でWebアプリを運営する場合、できるだけ無料のプラットフォームを使ったほうが良いですよね。
成果物として自作したWebアプリを公開するだけのであれば、Herokuの無料枠で十分です。
f:id:HarrisonKawagoe8111F:20210414182207p:plain

ただ、Herokuの無料枠は30分に一回サーバーをスリープさせるなど、色んな制限があります。利用人数が多いサービスをHerokuの無料枠で運用するのはあんまりオススメしません。
また、HerokuはAWSと違って、アプリを走らせる為のサーバーとデータベースしか提供していません。大半な場合はそれで十分ですが、写真投稿機能など、ストレージサーバが必要な場合は、外部のサービスと組み合わせて使いましょう。

Github Pages

f:id:HarrisonKawagoe8111F:20210414182418p:plain
先ほど紹介したGithubは、ソースコードをリモートで管理する機能以外に、静的なページを公開する機能もあります。
プログラミング研究会の資料置き場も、Github Pagesで運用されています:

misw.github.io

サイトをデプロイする方法は、普通のリポジトリに変更を反映する方法とほぼ同じです。Git&Githubの基本的な使い方さえわかれば、サイトの構築と管理が簡単にできます。
ドメイン名は自動的に"ユーザー名.github.io/リポジトリ名"になるので、ドメイン名に気にしなければ、ドメインDNSの設定などは一切いりません。
自分のポートフォリオサイトをGithub Pagesに載せるのはかなりアリだと思います。

MySQL Workbench

DjangoなどのWebフレームワークは、データベースの内容を変えられる管理画面はデフォルトで入っていますが、そういった管理画面が無いフレームワークも結構あります。
f:id:HarrisonKawagoe8111F:20210414191736p:plain

その場合、使用しているデータベースに対応しているクライアントツールを使うとだいぶ楽になります。
自分はバイトとチーム開発でよくMySQL WorkbenchというGUIツールを使っていました。
名前でMySQLしか使えないと勘違いされがちですが、MySQLのデータベース以外に、PostgreSQLなどのRDBMSを管理することも可能です(昨日初めて知った)。
また、データ、テーブルの閲覧機能と変更機能以外に、SQL文を実行する環境もあります。SQLでデータ取得機能などを実装する際は非常に便利です。

f:id:HarrisonKawagoe8111F:20210414193758p:plain

さいごに

いかがでしたか?
実際の開発に役立つツールはこれだけではありません。VimKubernetesなども紹介したかったんですが、記事が長過ぎると読みづらくなってしまうので、今回はここまでにしておきましょう。
この中に役立ちそうなツールがあったら、ぜひ活用してみてください!
MIS.Wのプログラミング研究会は、ゲーム制作、アプリ開発などをメインとして活動しております。ゲーム開発以外に、競技プログラミング機械学習などに詳しい会員も多数所属しております。興味があったらぜひMIS.Wにお越しください!
明日は幹事長のひらめ天君の記事ですね。お楽しみに〜