初心者がドットインストールを参考にローカル開発環境構築に挑戦!

こんにちは。プログラミング初心者のブガ郎です。

今回、初心者には難しい言われるローカル開発環境の構築に挑戦してみました。学習サイト「ドットインストール」の動画講座の、そのまんまのやり方でです。

ドットインストールの動画自体はとても分かりやすく、注意事項や補足説明も充実しているのですが、それでもやはり難しかったなと思います。

難しく感じた理由は、流れとして全体を把握しにくいという事が挙げられます。
ドットインストールは、動画の一つ一つが短いからこそ学習しやすいのですが、ローカル開発環境の構築については一気に通して全部やった方が理解しやすいと思います。

とは言え、全14本の動画をすべて一気に観る時間がないという人も多いでしょう。

そこで、今回は、一気に進める時間がなかった初心者の私が自分用のメモとしてまとめた「ローカル開発環境の構築の流れ」を記事として再構成して公開します。これを読んで作業の流れについて理解を深めておけば、進める際の混乱やストレスを少しは減らせると思います。私と同じような境遇の方が初めてローカル開発環境構築に挑戦する際の参考になれば幸いだなと思います。

なお、手順の詳細(具体的なコマンドなど)は記しません。そちらについてはドットインストールのサイトでご確認ください。

※今回の記事は「ローカル開発環境とは何か」を大まかには理解している方が対象読者です。
※今回の記事はWindowsでの環境構築に限定しています。Macでの環境構築に触れません。
※ドットインストールの「ローカル開発環境の構築(Windows編)」は無料レッスンです。

おおまかな流れ

まず、何をインストールするか把握します。

インストールするもの
  1. 仮想マシン本体【VirtualBox】
  2. 仮想マシンの設定を簡単に行うツール【Vagrant】
  3. 仮想マシンへのログオンツール【PuTTY】
  4. ファイル転送ツール【Cyberduck】

※【】内は具体的なツールの名称です

環境構築のおおまかな流れは下記の通りです。

構築の流れ
  1. 仮想マシン本体(VirtualBox)をインストール
  2. 設定ツール(Vagrant)をインストール
  3. 仮想サーバを起動
  4. ログオンツール(PuTTY)をインストール
  5. 仮想マシンにログイン
  6. 仮想マシンの設定
  7. ファイル転送ツール(Cyberduck)のインストール
  8. 転送ツールから仮想マシンへ接続

なお、時間が足りず、上記作業の途中でやめた場合、再開時には注意が必要です。

途中から作業を再開する場合、インストール済の各ツールを起動しておく必要があります。

例:「5.仮想マシンにログイン」から作業を再開する場合、最初に下記を行っておく必要があります

  • 仮想マシン本体を起動
  • 設定ツールを起動

私の場合、この辺をよく理解できておらず、再開時に「うまく行かなーい!」と嘆いたりしてました。考えてみれば、PCを起動していない状態でOSにログインしようとしているのと同じですから、当然うまく行きませんよね。

それではメモ詳細を記して参ります。

仮想マシン本体(VirtualBox)をインストール

【VirtualBox】はOS上で別のOSを実行する為のソフトウェア。

VirtualBoxインストール
  1. 公式サイト: https://www.virtualbox.org/
  2. 「VirtualBox 6.0.0 platform packages」というブロック内の《Windows hosts》をクリックしてダウンロード~インストール

ここは特に躓かないと思います。

設定ツール(Vagrant)をインストール

【Vagrant】は VirtualBox の複雑な設定を自動化するツール。サーバの設定やOSのインストールを行う。これらの設定をVagrantで行うことにより、普段はVirtualBoxを意識する事はあまりなくなる。

Vagrantインストール
  1. 公式サイト: https://www.vagrantup.com/
  2. 《DOWNLOAD 2.2.2》をクリック(数値はその時点での最新Ver)
  3. OSとビット数を選択してクリック(今回、自分の場合、Windowsの64-bit)

ダウンロードとインストールにはそれぞれ割と長めの時間が掛かります。PCの再起動も必要となります。
時間はかかりますが、躓きポイントではないですね。

仮想サーバを起動

PowerShellを起動してコマンドを打ち込んで実行します。

仮想サーバ用のフォルダを作成

仮想サーバ用フォルダ作成
  1. Windowsのユーザフォルダ内にVagrant用のフォルダを作成
  2. その中にCentOS用のフォルダを作成

こうなります。↓

フォルダ作成はPowerShellでコマンド打たなくても、普通にフォルダからのファインダー操作で作成しても同じ事です。

ユーザフォルダ名が日本語だったり、スペースが含まれたりしていると結構面倒なことになりますよ!

私の場合、ユーザ名が日本語だったので、それに伴いユーザフォルダも日本語になっていました。その結果、Vagrantコマンドがエラーとなり、この後の工程でどうしても進めなくなり一度挫折しました。

実は、ドットインストールには、このエラーへの対策も記載されています。簡単に言うと、Cドライブ直下に、ローカル開発環境用のフォルダを新たに作る、という対策です(もちろんフォルダ名は日本語不可)。ただ、個人的には、Cドライブ直下に色々ゴチャゴチャとフォルダを増やしていくのは好きではないので、この対策は採用せず、Windowsへのログインユーザを新たに設定しなおして(もちろん日本語ではありません)、今後はすべてそちらのユーザでログインする事にしました。(つまり、今までの環境は捨てました!)
面倒と言えば面倒ですが、日本語ユーザ名は今回のことに限らず、思わぬ不具合を発生させる可能性があるので、思い切ってそのようにしました。

仮想マシン設定用のファイルを作成・編集

設定ファイルの作成と編集
  1. コマンドを打ち込みVagrant用の設定ファイルを作成
  2. 作成された設定ファイルを編集
    • エディタで設定ファイルを開き、IPを書き換える

私は、ここでも躓きました。これ、結構間違いやすいと思います。

書き換える部分は下記の行です。

# config.vm.network “private_network”, ip: “xxx.xxx.xx.xx” 

少し上に、下記の行がありますが、間違えないように!

# config.vm.network “forwarded_port”, guest: 80, host: 8080, host_ip: “127.0.0.1”



※画像はクリックで大きくなります

 

ここまで出来たら、コマンドを打ち込み仮想マシンを起動します。
※起動には数分かかります。

ログオンソフト(PuTTY)をインストール

【PuTTY】は仮想マシンにアクセスする為のソフトウェア。

PuTTYをインストール
  1. 公式サイト: https://www.putty.org/
  2. 《Windows Installer》を探し、適切なリンクをクリック
    • 自分の場合は、putty-64bit-0.70-installer.msi でした

※ダウンロードからインストールまで割とすぐ終わります

仮想マシンにログイン

つづいて、インストールした、PuTTYを起動します。

仮想マシンにログイン
  1. コネクションタイプ(①)とIPアドレスを設定(②)
    • Host Name(or IP address): 仮想マシン設定ファイルにて設定したIPアドレス
    • Connection Type: SSH
  2. 次回以降の為、設定を保存する
  3. Open(③)をクリック!

※ここは躓きポイントのようです。私も躓きました。
想定されるエラーや対応について、ドットインストールの当該工程のページに細かく書いてあります。
私の場合、仮想マシンが二つ起ち上がっていた為、エラーが発生していました。

さてここをクリアすると、いよいよログインです。
IDとパスワードを入力しターミナル画面に [vagrant@localhost ~]$ と表示されればOKです。

仮想マシンの設定

この状態で仮想マシンにログインできているわけですが、OSが動いているだけで何にも入っていない状態です。

本当は、この後、PHPやらRubyやら必要なものを個々に仮想マシンへインストールするのですが、ドットインストールでは、諸々まとめてインストールしてくれるスクリプトが用意されています。動画に従ってコマンドを打ち込んで行けばOKです。これで、PHPやRubyやPythonなどがまとめてインストールされます。

この辺は、正直なところ、「ドットインストールさんにオンブにダッコ」な感じですが、初心者にはありがたいので、謹んで活用させていただきました。

なお、コマンド詳細は省きますが、以下の流れを実行しているということは理解しておくとよいと思います。
ちなみに、工程によってはかなりの時間がかかります。止まってしまったのかと、不安になるかと思いますので、その辺りも記しておきます。

仮想マシンへの各種インストール
  1. OSを最新版にアップデート
    • 数分かかります
  2. スクリプトを入手するためのgitをインストール
    • すぐ終わります
  3. gitを使って設定用のスクリプトをダウンロード
    • すぐ終わります
  4. スクリプトを実行(ここで諸々がインストールされる!)
    • カップ麺を作って食べ終わって歯磨きが終わってトイレも済ませるくらい時間かかります。
    • 固まってるように見えたりエラーが出ているように見えたりしますが「石の上にも25分」の精神で待ちましょう。
    • ここでの最大の注意点は、飽きて飲み始めない事デスね!
  5. 各種設定を反映
    • 一瞬で終わります

ファイル転送ツール(Cyberduck)のインストール

ここまで出来たら、あと一息です。ファイル転送ツールをインストールします。

【Cyberduck】は仮想マシン上のファイルを簡単に扱えるようにするツール。

Cyberduckをインストール
  1. 公式サイト: https://cyberduck.io/
  2. 画面右上のメニューにある【Download】をクリック
  3. あとは画面に従ってインストール
Windows10の青いアイコンからダウンロードしようとすると、Windows Storeに誘導され、有料でのダウンロード購入になります。(2800円)
画面右上の【Download】からダウンロードすると、「使ってみて気に入ったら寄付する」という形態での購入になります。
そのあとの流れ
  1. エクスプローラの設定を確認
    • 「隠しファイル」「隠しフォルダ」を表示する設定に変更
    • 拡張子もすべて表示される設定に変更
  2. Cyberduckを起動し連動させるエディタを設定

転送ツールから仮想マシンに接続

いよいよ完了となります!

仮想マシンに接続
  1. Cyberduckを起動
  2. 「新規接続」をクリックし以下のように設定
    • プロトコル:SFTP(SSHによる暗号化FTP)を選択
    • サーバ:192.168.33.10
    • ユーザ:vagrant
    • パスワード:vagrant
  3. 「接続」をクリック
  4. 「そのホストは現在システムに認識されていません」と警告がでるが「許可」をクリック
  5. 接続をブックマークとして保存

以上で、ローカル開発環境の構築は完了です!!!

起動と終了の手順

あとは、起動と終了の手順を覚えればOKです。

手順通りに進めていれば、今、起動している状態なので、まずは、終了の手順から記します。

終了手順
  1. Cyberduckを終了
    • ファイルメニューから終了でも、Ctrl+Qでも、×をクリックでも、終われればOK
  2. PuTTYを終了
    • PuTTYのターミナル上で exit と打ち込みenter!
  3. Vagrantから仮想マシンを終了
    • PowerShell で vagrant suspend と打ち込みenter!

つづいて起動の手順です。

起動手順
  1. Vagrantから仮想マシンを起動
    • PowerShellで MyCentOSへ移動し vagrant up と打ち込みenter!
  2. PuTTYを起動
    • SavedSessionから「MyCentOS」を選択し「Load」→「Open」
    • login as: vagrant
    • keyword: vagrant
  3. Cyberduckを起動

以上です!

あとは、Cyberduckでファイルやフォルダを操作し、PuTTYでコマンドを打ち込み、Cyberduckから連携されて起動するエディタでコードを書けばOKですね。

もう、バシバシ開発(の勉強)するのみですね!

以上、長い記事を最後までお読みいただきありがとうございました!

 

 

 

1 個のコメント

  • […] 初心者がドットインストールを参考にローカル開発環境構築に挑戦!こんにちは。プログラミング初心者のブガ郎です。 今回、初心者には難しい言われるローカル開発環境の構築に挑戦 […]