Laravel によるコメント掲示板の開発

Visual Studio Code を設定する

仮想開発環境 (ubuntu) に設置されたプロジェクトのファイル群を編集するために，ローカルのクライアントPC（ここでは Intel mac を使っていますが，Windowsでも可）にインストールした Visual Studio Code を利用することにします．リモートのファイルを Visual Studio Code で編集するためには拡張機能をインストールして，若干の設定が必要になります．なお，Visual Studio Code のインストール方法はこちらを参照してください．

まず，クライアントPCの任意のフォルダ（例えば Documentsフォルダ） comments_app という新規フォルダを作成して，そのフォルダを Visual Studio Code で開きます．フォルダの開き方はこちらを参照してください．

Visual Studio Code に SFTP 拡張機能をインストールします．なお，SFTP 拡張機能は Natizyskunk 氏によって公開されているものと，liximomo 氏によって公開されているもの（すでに非推奨になっている）があるので，Natizyskunk 氏公開の SFTP をインストールしてください．拡張機能のインストール方法についてはこちらを参照してください．

SFTP の設定を行います．Visual Studio Code のショートカットキー Ctrl + Shift + P （mac は⌘ + shift + P）でコマンドパレットを起動します．コマンドパレットに sftp と入力すると，検索結果に「SFTP: Config」が表示されるので，これをクリックします．

上の作業で .vscode という隠しフォルダが作成され，その中に sftp.json ファイルの雛形が作成されました．作成された sftp.json ファイルは次のようになっているはずです．

.vscode/sftp.json
{
    "name": "My Server",
    "host": "localhost",
    "protocol": "sftp",
    "port": 22,
    "username": "username",
    "remotePath": "/",
    "uploadOnSave": false,
    "useTempFile": false,
    "openSsh": false
}

この sftp.json ファイルを次のように修正します．なお name は任意の名前で構いません．host の IP アドレスは次のように ip a コマンドで確認できます．また，remotePath は pwd で確認すると良いでしょう．また，14 行目の ".DS_Store" mac 環境では必要ですが，Windows 環境では不要です（残っていても問題ありません）．

.vscode/sftp.json
{
    "name": "Ubuntu-101",
    "host": "192.168.56.101",
    "protocol": "sftp",
    "port": 22,
    "username": "vagrant",
    "remotePath": "/home/vagrant/Documents/laravel/comment_app/",
    "uploadOnSave": true,
    "useTempFile": false,
    "openSsh": false,
    "ignore": [
        ".vscode",
        ".git",
        ".DS_Store"
    ]
}

vagrant@ubuntu2204 comment_app $ ip a ⏎
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
    link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
    inet 127.0.0.1/8 scope host lo
       valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 08:00:27:2d:3b:77 brd ff:ff:ff:ff:ff:ff
    altname enp0s3
    inet 10.0.2.15/24 metric 100 brd 10.0.2.255 scope global dynamic eth0
       valid_lft 84222sec preferred_lft 84222sec
    inet6 fe80::a00:27ff:fe2d:3b77/64 scope link
       valid_lft forever preferred_lft forever
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
    link/ether 08:00:27:30:e5:c5 brd ff:ff:ff:ff:ff:ff
    altname enp0s8
    inet 192.168.56.101/24 brd 192.168.56.255 scope global eth1
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:fe30:e5c5/64 scope link
       valid_lft forever preferred_lft forever
vagrant@ubuntu2204 comment_app $ pwd ⏎
/home/vagrant/Documents/laravel/comment_app
vagrant@ubuntu2204 comment_app $

SFTP の設定ができたら，リモート (ubuntu) のファイル群をクライアント PC に同期します．このためにショートカットキー Ctrl + Shift + P （mac は⌘ + shift + P）でコマンドパレットを起動し，「sftp」と入力して検索します．検索結果の中に「SFTP: Sync Remote -> Local」が表示されるので，これをクリックします．

先ほど設定したリモートの名前とリモートパスが表示されるので，クリックします．

接続のためのパスワード「vagrant」を入力して Enter を押下します．

ファイルの数が多くあるので同期には時間を要しますが，しばらくすると同期が完了します．例えば，README.md ファイルを開きます．マークダウンファイルなので，Visual Studio Code でプレビューすることも可能です．Visual Studio Code でファイルを編集して上書き保存をすると，自動的にリモートへ同期されることも確認すると良いでしょう．

リモートへ同期されたかどうかを確認するためには，git status コマンドを利用すると良いでしょう．

vagrant@ubuntu2204 comment_app $ git status ⏎
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
	modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")
vagrant@ubuntu2204 comment_app $

目次に戻る

« 戻る次へ »