LoginSignup
5
7

More than 3 years have passed since last update.

@lukapla(lukapla)

さくらのレンタルサーバにLaravelをインストールしてローカルWindowsのVisual Studio CodeとSFTPを利用した同期を行う

Last updated at Posted at 2020-03-12

自分がさくらのレンタルサーバを利用してLaravelの勉強をするために構築したものなのでかなりざっくりした内容であることをご了承ください。

TeraTermなどを利用してSSHでさくらのレンタルサーバへ接続
ログインIDはドメイン名で自分が決めた部分：以下の例ではtestlaravel
パスワードはさくらインターネットから送られてきたもの、もしくは自分で管理コンソールから変更したもの

FreeBSD 11.2-RELEASE-p14 (GENERIC) #0: Mon Aug 19 22:38:50 UTC 2019
Welcome to FreeBSD!
% pwd
/home/testlaravel
% whoami
testlaravel
% chsh -s /usr/local/bin/bash
Password:（さくらのレンタルサーバのパスワード）
chsh: user information updated
% mkdir bin
% ls
MailBox         bin             db              ports           sakura_pocket   sblo_files      www
% cd bin
% curl -sS https://getcomposer.org/installer | php
All settings correct for using Composer
Downloading...
Composer (version 1.9.3) successfully installed to: /home/testlaravel/bin/composer.phar
Use it: php composer.phar
% php composer.phar
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.9.3 2020-02-04 12:58:49
（省略）
% cd ..
% ls
MailBox         bin             db              ports           sakura_pocket   sblo_files      www
% chmod 755 bin/composer.phar
% cd bin
% ls
composer.phar
% php composer.phar self-update
You are already using composer version 1.9.3 (stable channel).
% cd ..
% ls
MailBox         bin             db              ports           sakura_pocket   sblo_files      www
% cd www
% $HOME/bin/composer.phar create-project laravel/laravel cms "5.5.*" --prefer-dist
Installing laravel/laravel (v5.5.28)
  - Installing laravel/laravel (v5.5.28): Downloading (100%)
Created project in cms
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 79 installs, 0 updates, 0 removals
  - Installing kylekatarnls/update-helper (1.2.0): Downloading (100%)
  - Installing symfony/thanks (v1.2.5): Downloading (100%)
（省略）
> @php artisan key:generate
Application key [base64:TNYRyCB0qOWIXzKfTzdugTh67NMa7wpZ/D2TeCGnMeQ=] set successfully.
%

これでLaravelのインストールは完了。次はSFTPの設定

VS Codeの上部メニューからファイル > フォルダーを開く を選択して、さくらのレンタルサーバに作成したLaravelのプロジェクトディレクトリと同期させるためのデータをローカルPCに置くフォルダ（任意）を選択
（この選択したフォルダにさくらのレンタルサーバにあるLaravelプロジェクトのデータをダウンロードしてその後に同期させます）
choosefolder.png
※例えばローカルPCの中にXAMMPが動いている場合などは、htdocsフォルダを指定すると、ローカルのXAMMP環境でもさくらのレンタルサーバ環境でも同じコードが動かせて便利かもしれません
※今回の例では、C:\Users\x1_carbon\Desktopを選択しています（ローカルPCで使用しているWindowsのユーザ名がx1_carbon）

Visual Studio Code(VS Code)の左メニューからExtensionsをクリックし、検索ウィンドウに「SFTP」と入れると一番上にSFTPの拡張機能が表示されるので緑色の「Install」ボタンをクリックしてインストール
sftp_install.png
VS Codeの一番左下にある歯車マーク（管理）をクリックし、「コマンド パレット」を選択
commandpalet.png
画面上部に出てくるコマンド パレットに、「SFTP:Config」と入力してエンターキーを押す
commandpalet2.png
sftp.jsonが作成されて表示されるので、「PrivatekeyPath」と「passphrase」の2行を追加した後、各項目を設定（trueの後ろにカンマ入れるのを忘れないように）
sftp.json.png

  • name：自分の好きなように接続用プロファイルの名前をつける
  • host：自分が借りているさくらのレンタルサーバのhost名（FQDN）を記載
  • protocol：（変更不要：sftpが指定されているので）
  • port：（変更不要：ポート番号22が指定されているので）
  • username：さくらのレンタルサーバのログイン名（host名、xxxxxxx.sakura.ne.jpのxxxxxxxの部分）を記載
  • remotePath：/home/xxxxxxx(username)/wwwを指定
  • uploadOnsave：（変更不要：VS Codeでファイルがセーブされた時に自動でさくらのレンタルサーバへ変更点をアップロードしたいためにtrueでOK）
  • privateKeyPath：追加項目。自分のPCの中でid_rsaキーが置いてある場所を指定（後述のSFTPの公開鍵設定時に利用）
  • passphrase：追加項目。自分で設定した（する予定の）パスフレーズを記載（後述のSFTPの公開鍵設定時に利用）
  • （2020.5.24追記）ignore：追加項目。人によって異なる部分だけど[".vscode", ".git"]とか指定しておいた方がいいと思う　"ignore": [".vscode", ".git"]<=こんな感じの指定

ここからはSFTPの公開鍵認証設定を行っていきます。まずはVS Codeの上部メニューからターミナル > 新しいターミナル を選択してターミナル画面（powershell）を開き、以下のように「ssh-keygen」を実行します

Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.

PS C:\Users\x1_carbon> pwd

Path
----
C:\Users\x1_carbon


PS C:\Users\x1_carbon> ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\x1_carbon/.ssh/id_rsa):（何も入れずエンター=>デフォルトのディレクトリ/ファイルで問題ないので）
Created directory 'C:\Users\x1_carbon/.ssh'.
Enter passphrase (empty for no passphrase):（VS Codeのsftp.jsonに自分で決めて設定したpassphraseを入力）
Enter same passphrase again:（上記と同じpassphraseを繰り返し入力）
Your identification has been saved in C:\Users\x1_carbon/.ssh/id_rsa.
Your public key has been saved in C:\Users\x1_carbon/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:90iHz7aEpXId8lhUkqKQx0Aaxxxxxxxxxxxxxxxxxxxx
The key's randomart image is:
+---[RSA 2048]----+
|   o.oo+    ...  |
|  o ooo o . .o   |
| . +.  o . ..    |
|. + *   .  o     |
| o * *  S = =    |
|. . * + .o / .   |
| . o + o. * O    |
|    E .  o o .   |
|     .      .    |
+----[SHA256]-----+

PS C:\Users\x1_carbon> cd .ssh
PS C:\Users\x1_carbon\.ssh> ls


    ディレクトリ: C:\Users\x1_carbon\.ssh


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----       2020/03/09     20:52           1766 id_rsa
-a----       2020/03/09     20:52            408 id_rsa.pub


PS C:\Users\x1_carbon\.ssh> mv id_rsa.pub authorized_keys
PS C:\Users\x1_carbon\.ssh> ls


    ディレクトリ: C:\Users\x1_carbon\.ssh


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----       2020/03/09     20:52            408 authorized_keys
-a----       2020/03/09     20:52           1766 id_rsa


PS C:\Users\x1_carbon\.ssh> scp authorized_keys testlaravel@testlaravel.sakura.ne.jp:/home/testlaravel/.ssh/
Enter passphrase for key 'C:\Users\x1_carbon/.ssh/id_rsa':（VS Codeのsftp.jsonに自分で決めて設定したpassphraseを入力）
testlaravel@testlaravel.sakura.ne.jp's password:
authorized_keys                          100%  408     0.4KB/s   00:00

左下の歯車マークから「コマンド パレット」を選択し、「SFTP: Sync Remote -> Local」を選択
自分がsftp.jsonファイルにnameとして指定した名前と、その下にローカルPCのダウンロード先フォルダが表示されるので、問題がなければ名前をクリックしてデータをダウンロード
download.png
このダウンロードしたデータを今後はVS Codeで開いた後に、追加/変更して保存すると変更されたデータが自動でさくらのレンタルサーバに反映されるようになります（便利！）

注意：ローカルPCにおける追加/変更は自動でさくらのレンタルサーバへ反映されますが、（逆方向の）さくらのレンタルサーバ側のデータ追加/変更は自動でローカルPC（VS Code）に反映されません。そのためにさくらのレンタルサーバ側でartisanコマンドを実行するなりでファイルに変更/追加があった場合にはコマンドパレットから「SFTP: Sync Remote -> Local」を実行してください

参考：友人のMacに設定をした際に、SFTP接続が「Error while signing data with privateKey: error:06000066:public key routines:OPENSSL_internal:DECODE_ERROR」というエラーで失敗する事象にぶつかりましたが、VS Codeのコンソールからではなく、Macネイティブのターミナルから「ssh-keygen」で鍵の再作成を行い、その鍵のペアを使うことにより回避することができました（VS Codeのバグ？）。

最後に作成したLaravelプロジェクト用にMySQLを設定します

さくらのレンタルサーバコントロールパネルホームから「データベース」をクリック
database.png
[新規追加]をクリック
new_db.png
データベース名（任意）
データベース接続用パスワード（任意）
を設定し、「同意する」にティックを入れて[作成する]ボタンをクリック
db_creation.png
データベースが作成されるので、[pgpMyAdminログイン]ボタンをクリックしてphpMyAdminにログイン
myphpadmin-login.png

ログイン画面が出たら、さくらのレンタルサーバのログイン名と、ついさっき自分で設定したデータベース接続用パスワードでログイン
phpmyadmin-login-page.png
左ペインにある自分が作成したデータベース名を確認（記録）
右ペインからは現在のサーバのFQDNを確認（記録）
また、サーバ接続の照合順序も自分が希望しているものであるかを確認（記録する必要はない）
phpmyadmin-db.png

VS Codeを開いてLaravelの.envファイルを開く
その中のDB関係の以下4項目を設定変更した後保存
env.png

  • DB_HOST：先ほどphpMyAdminで確認したDBサーバ（現在のサーバ）のFQDN
  • DB_DATABASE：先ほどphpMyAdminで確認した自分が作成したデータベース名
  • DB_USERNAME：さくらのレンタルサーバのログイン名
  • DB_PASSWORD：自分がDBを作成した際に設定したパスワード

これで設定完了です！

あとはLaravelの勉強を進めるだけ:writing_hand:

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
7