VSCodeの設定を見直す

ここ数年ほど増改築を繰り返しながらポリシーなく育ってきてしまっていた手元の環境を見直したい!ということで、まずはエディタから見直すことに。いったんVSCodeの設定ファイルをぜんぶ消してみて、必要な設定を戻したり、べつに設定しなくてもいいものはそのままにしたり。とりあえず以下のようになった。

{
  "editor.defaultFormatter": "svipas.prettier-plus",
  "editor.detectIndentation": false,
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.renderWhitespace": "boundary",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.associations": {
    "*.html.erb": "erb",
    "*.uiflow": "uiflow"
  },
  "files.autoSave": "onWindowChange",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "security.workspace.trust.untrustedFiles": "open",
  "vscode-erb-beautify.keepBlankLines": 1,
  "workbench.colorTheme": "Iceberg",
  "workbench.editor.untitled.hint": "hidden",
  "workbench.startupEditor": "newUntitledFile",
  // Hide hover documentation and references
  "css.hover.documentation": false,
  "css.hover.references": false,
  "html.hover.documentation": false,
  "html.hover.references": false,
  "scss.hover.documentation": false,
  "scss.hover.references": false,
  // Language specific settings
  "[erb]": {
    "editor.formatOnSave": false,
    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
  },
  "[html]": {
    "editor.formatOnSave": false
  },
  "[markdown]": {
    "editor.formatOnSave": false,
    "files.trimTrailingWhitespace": false
  }
}

知らないあいだにGitHubアカウントでログインしたら別のマシンと設定を同期できる機能がついていてべんり。ずっと前からあったのかな…。あわせて拡張機能もdeprecatedなものは削除するなど整理した。

工夫ポイント

UIをデザインするときに、 UI flows と呼ばれる、ユーザーが「見るもの」と「すること」を整理した図を書く機会があって、この図をテキストデータで書けるVSCodeのプラグインが便利すぎる。つくってくれた人、ありがとう。テキストデータなのでGitで管理できるし。とくに拡張子など決まりはないのだけど、 *.uiflow ってテキストファイルを開いたときはこのプラグインが有効になるように設定してます。

あとは地味だけどHTML要素やCSSのプロパティにマウスカーソルを重ねるとMDNのリファレンスが表示されるやつは知ってるよ!ってことで非表示にしたり、Markdownのときは改行を意味する行末の半角スペースを削除しないようにしたり。ここからまた育てていくぞ!

Ubuntu 22.04でLAMP環境をつくる

ConoHa VPSでUbuntu 22.04のテンプレートを使って、LAMP(Linux + Apache + MySQL + PHP)環境をセットアップするまでの手順をメモします。

rootログイン・ユーザー作成・公開鍵認証

ConoHaで新規登録するときにコントロールパネルで入力した、rootパスワードでログイン。

ssh root@{IPアドレス}

ユーザーを作成する(ここでは例として shikakun にしてますが、任意の名前へ変更してください)

adduser shikakun

パスワードとFull Nameを入力後、作成したユーザーをsudoコマンドを利用する「sudoユーザー」に追加する。

usermod -G sudo shikakun

無事にユーザーを作成できたので、rootユーザーから切り替える。

su - shikakun

あわせて、公開鍵認証でSSHログインできるようにする。ローカル環境の公開鍵をコピーし、 ~/.ssh/authorized_keys に書いておく。

mkdir .ssh
cd .ssh
echo -e "ssh-rsa  AAAAXXXXXXXXXX ..........(略).......... XXX" >> authorized_keys
cd ~
chmod 700 .ssh
chmod 600 .ssh/authorized_keys

SSHログインのポート番号の変更

SSHログインのポート番号はデフォルトで22だけど、狙われやすいのでセキュリティを高める目的でポート番号を変更する。(ここでは例として 22000 にしてますが、任意の数字へ変更してください)

sudo vim /etc/ssh/sshd_config

以下のように書き換えてポート番号を変更する。

- #Port 22
+ Port 22000

あわせて、rootログインも無効にしておく。

- PermitRootLogin yes
+ PermitRootLogin no

ファイルを保存したら、sshdをリロードして設定を有効にする。

systemctl reload sshd

ufwでポート番号22000でアクセスできるように設定する。

sudo ufw status
sudo ufw allow 22000/tcp

ポート番号22はもう使わないので、 ufw status numberedOpenSSH が設定されている番号を確認しつつ ufw delete コマンドで許可を削除する。

sudo ufw status numbered
sudo ufw delete 1
sudo ufw status numbered
sudo ufw delete 2

ローカル環境の ~/.ssh/config に以下のように追記することで、 ssh conoha のようにIPアドレスやポートを省略してアクセスできるようになる。

Host conoha
  Hostname {IPアドレス}
  User shikakun
  Port 22000
  IdentityFile ~/.ssh/id_rsa

LAMP環境をつくる

apache2をインストールして、ポートのアクセスを許可する。

sudo apt update
sudo apt install apache2
sudo ufw app list
sudo ufw allow in "Apache"
sudo ufw status

http://{IPアドレス}/ へアクセスすると、It worksページが見える!

つづけてMySQLをインストール。

sudo apt install mysql-server
sudo mysql -u root -p
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password by '********';

Ctrl + D で抜けたら sudo mysql_secure_installation を実行して設定を完了させる。そしてPHPをインストール。

sudo apt install php libapache2-mod-php php-mysql

php -v でバージョンを確認できればインストール完了。

独自ドメインでアクセス・常時SSL化

IPアドレスではなく独自ドメイン dev.shikakun.com でアクセスできるようにしたい。あと常時SSL化もしたい!

今回はCloudflareのDNSで管理しているドメイン(shikakun.com)を適用するため、Cloudflareの管理画面で dev.shikakun.com をAレコードで追加する。IPv4 addressにはサーバーのIPアドレスを指定。

公開するドキュメントのルートディレクトリや、apache2の設定ファイルを用意する。

sudo mkdir /var/www/dev.shikakun.com
sudo chown -R $USER:$USER /var/www/dev.shikakun.com
sudo vim /etc/apache2/sites-available/dev.shikakun.com.conf

dev.shikakun.com.conf の内容はこんなかんじ。

<VirtualHost *:80>
  ServerName dev.shikakun.com
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/dev.shikakun.com
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

a2ensite コマンドでシンボリックリンクを張ったら、apache2を再起動。

sudo a2ensite dev.shikakun.com
systemctl reload apache2

http://dev.shikakun.com/ でapache2のページが見えるようになった!

/var/www/dev.shikakun.com/info.php に以下のようなPHPファイルを置くと、PHPが動いていることも確認できる(秘匿情報が含まれているので、確認したら削除する)。

<?php
phpinfo();

常時SSL化のためにポートのアクセスを許可する。

sudo ufw allow in "Apache Secure"

certbotをインストールし、Let's EncryptのSSL証明書を発行。

sudo apt install certbot
sudo certbot certonly --webroot --webroot-path /var/www/dev.shikakun.com/ -d dev.shikakun.com -m {メールアドレス}
sudo ls /etc/letsencrypt/live/dev.shikakun.com/
sudo vim /etc/apache2/sites-available/dev.shikakun.com.conf

apache2の設定ファイルを以下のように書き換える。

<VirtualHost *:443>
  ServerName dev.shikakun.com
  ServerAdmin webmaster@localhost
  DocumentRoot /var/www/dev.shikakun.com
  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
  SSLCertificateFile /etc/letsencrypt/live/dev.shikakun.com/cert.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/dev.shikakun.com/privkey.pem
  SSLCertificateChainFile /etc/letsencrypt/live/dev.shikakun.com/chain.pem
</VirtualHost>

a2enmodコマンドでsslを有効にしたあと、apache2を再起動。

sudo a2enmod ssl
sudo systemctl reload apache2

https://dev.shikakun.com/ でアクセスできるようになり、SSLが有効になってる!

ここまできたら http:// でアクセスしたら https:// へリダイレクトしたい!ということで、以下のように設定した。

sudo a2enmod rewrite
sudo vim /etc/apache2/sites-available/000-default.conf
<VirtualHost *:80>
    ..........(略)..........

    RewriteEngine on
    RewriteCond %{HTTPS} off
    RewriteRule ^/(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
</VirtualHost>
sudo systemctl reload apache2

やりたいことぜんぶできた〜!これで、WordPressをインストールしたりできるようになった!

Yo!

はじめまして、鹿といいます。会社員です。昼休みや週末に詩を書くほか、詩を朗読してインターネットへアップロードしています。職業は、GMOペパボ株式会社に所属するデザイナーです。

わからないことを調べたり、本を読んで知った新しい知識を、公開しながら記録していけたらいいなと思って、このウェブサイトをつくりました。どうぞよろしくお願いします。