VScodeのインストール
VScodeは、マイクロソフトのフリーソフトです。
多くのプログラマーに使われていますので、安心して利用出来ます。
VScodeのダウンロード
Visual Studio 無償版からダウンロード出来ます。
⇨ダウンロードが完了したらブラウザの左下のアイコンをクリック
⇨同意して次へ
⇨フォルダは特に変更しないでOKです次へ
⇨そのまま次へ
⇨ファイルのコンテキストメニュー追加
⇨VScodeをメインで使う場合はサポートされているファイルの種類のエディタとして登録
⇨次へ
⇨確認してインストール
⇨完了です。
VScodeの設定
拡張機能のインストール
⇨Japanese Language Pack for VS Code
⇨Visual Studio Code Remote – WSL
⇨Docker for Visual Studio Code
は、取りあえず入れておきましょう。
後は、自分の使う言語関連をインストール
⇨インストールが終わったら一度閉じてください。
Ubuntu側からVScodeを起動
⇨先日インストールしたUbuntuを起動します。
⇨VScode用のフォルダを作成（ここではcode）
mkdir code && cd code
⇨VScodeを起動します。
code .
⇨Installing VS Code Server for x64となり
⇨VScodeが起動して以下の様になればOK
⇨①WSLでUbuntu内のcodeにいる事を表しています。
⇨②WSLでUbuntuに繋がっている事を表しています。
⇨次回からはVScodeを直接起動してもこの状態になります。
Ubuntu+Apache2+PHPでWEB開発
UbuntuにPHPのインストールをします。
sudo apt update && sudo apt -y upgrade sudo apt -y install php
PHPをいれたのでApache2はすでに入っていと思いますが、入っていない場合はインストール
sudo apt -y install apache2
Apache2の起動
sudo service apache2 start または、 sudo apachectl start
ブラウザのアドレスに「localhost」と入力して「Enter」こんなのになればOK
htmlファイルは、/var/www/htmlに置くようになっていますが、VScodeからは書き込みの権限が無いのでVScodeで開発が出来ません。
そこで、~/codeにhtmlフォルダを作って/var/wwwにシンボリックリンクを張ってやります。
まずVScodeで~/codeにhtmlフォルダを作ります。
⇨①エクスプローラーをクリック
⇨②新しいフォルダをクリック
⇨htmlフォルダを作成
次にUbuntu側~/codeで、htmlフォルダを確認
ls
⇨/var/www/htmlを削除して
⇨~/code内のhtmlのシンボリックリンクを
/var/www/内に作成します。
sudo rm -r /var/www/html sudo ln -s ~/code/html /var/www/html
それでは、VScodeで開発してみましょう！
⇨①htmlをアクティブにして
⇨②新しいファイルをクリック
⇨「index.php」を作成してください。
<?php phpinfo(); ?>
ブラウザのアドレスに「localhost」と入力して「Enter」こんなのになればOK
Apache2の停止
sudo apachectl stop sudo service apache2 stop
まとめ
今回は、WSLでVScode＋Apache2＋PHPでの開発環境を作りました。
Docker を使わない人や個人での開発環境の場合は、このまま開発を進めてOKでしょう。
参考になれば幸いです。
