Mono Works

チラシのすきま

VScode - WSL2 - hugo 環境構築(2021年4月25日版)

先日書いたこちらの記事では、元々使っていた WSL環境を WSL2環境に移行したが、今回は別の Windows PCでまっさらな状態から環境構築をおこなったので、その時のメモを残しておく。

キャップがなくてもペン先が乾かないノック式水性ペン ZEBRE CLiCKART

WSL2の導入

  1. “Linux 用 Windows サブシステム” オプション機能を有効にするため、PowerShellを管理者として実行し、下記コマンドを実行

    PS > dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
  2. “仮想マシン プラットフォーム” オプション機能を有効にするため、PowerShellを管理者として実行し、下記コマンドを実行

    PS > dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
  3. PCを再起動

  4. こちらからx64 マシン用 WSL2 Linux カーネル更新プログラム パッケージをダウンロードして実行

  5. WSLの規定バージョンを WSL2にするため、PowerShellで下記コマンドを実行

    PS > wsl --set-default-version 2

Ubuntuの導入

  1. Microsoft Storeから Ubuntu 20.04 LTSを導入
  2. Ubuntu 20.04導入後、一度起動して、アカウントとパスワードを設定
  3. PowerShellでwsl -l -vコマンドを実行し、Ubuntu 20.04が WSL2でデフォルト利用となっていることを確認
  4. Ubuntuで下記コマンドを実行し、リポジトリを日本のサーバーに切り替え

    sudo sed -i.bak -e "s/http:\/\/archive\.ubuntu\.com/http:\/\/jp\.archive\.ubuntu\.com/g" /etc/apt/sources.list
  5. 下記コマンドで Ubuntuのアップデート

    sudo apt -o Acquire::http::AllowRedirect=false update
    sudo apt -o Acquire::http::AllowRedirect=false upgrade
  6. 下記コマンドで Ubuntuの日本語環境を整える

    sudo apt-get install language-pack-ja
    sudo update-locale LANG=ja_JP.UTF8
    sudo apt-get install manpages-ja manpages-ja-dev
  7. \\wsl$Ubuntu-20.04をネットワークドライブに割り当て

VSCodeの導入

  1. 公式サイトから Windows用 VSCodeをダウンロートしてインストール(何もいじらずにインストールを進めると、PATHの追加もしてくれるのでインストール後にPCを再起動)
  2. 本体インストール後、拡張機能の Remote - WSLをインストール、その他必要な拡張機能をインストール
  3. ユーザー設定の設定キーボードショートカットは、他の環境のJSONファイルを流用
  4. VSCode画面左下の><をクリック、Remoto-WSL:New Windowを選択し、リモートウインドウ(Ubuntu-20.04)を開く。以降、VSCodeでの作業は、すべてリモートウインドウ(Ubuntu-20.04)での作業となる。

下記コマンドを Ubuntuのターミナルで実行して、VSCoseがリモートウインドウで起動することを確認できたら、以降のターミナル操作は、VSCode上のターミナル、Ubuntu独立のターミナル、どちらで操作してもよい。

code .

Gitのインストールと初期設定

sudo apt-get install git-all

git config --global user.name ユーザー名(スペースが入る場合はダブルクォーテーションで囲む)
git config --global user.email メールアドレス
git config --global core.quotepath false
# ターミナルを別に開いていて、commit時にVSCodeを起動させたい場合は、下記も追加
# git config --global core.editor "code --wait"

SSH鍵ペアの生成(ECDSA 384bitsの例)

ssh-keygen -t ecdsa -b 384 -C "コメント"
# 保存場所とファイル名を聞かれますが、変更の必要がなければ、そのまま [Enter]
# パスフレーズを入力して [Enter]
# 再度パスフレーズを入力して [Enter]
cd ~/.ssh
ls -al
# 鍵のペアを確認
id_ecdsa(秘密鍵) id_ecdsa.pub(公開鍵)

Bitbucketとの連携

本サイトを構成するソースファイルは、Bitbucketにリポジトリを作成して管理しているので、このリポジトリをクローンする。

Bitbucketに公開鍵を登録

Bitbucketにログイン後、ユーザーアイコン -> Personal settings -> SSH鍵 -> 鍵を追加をタップしたら、Labelに適当な名前を入力。下記を実行して、公開鍵の内容をコピー。コピーした内容を Keyに貼り付けて、鍵を追加をタップ。

cat ~/.ssh/id_ecdsa.pub

接続確認

ssh -T git@bitbucket.org
# (中略)
# Are you sure you want to continue connecting (yes/no/[fingerprint])? 初めて接続する場合、yesで [Enter]

ssh -T git@bitbucket.org # コネクションが閉じたらもう一度
# Enter passphrase for key '/home/{ユーザー名}/.ssh/id_ecdsa': パスフレーズ入力 [Enter]

# (中略)
#You can use git or hg to connect to Bitbucket. Shell access is disabled.

リポジトリのクローン

Bitbucketにログイン後、リポジトリ選択 -> クローンの作成をタップしたら、サブウインドウ右上のリストで SSHを選択して、コマンドをコピー。下記手順で適当なディレクトリにクローンをおこなう。

cd ~/{適当なディレクトリ}
# コピーしたコマンドを貼り付けて [Enter]
# クローンが終わるまで待つ

# リポジトリの中身の確認
cd 《ローカルリポジトリ》
ls -la

さくらインターネットとの連携

本サイトは、前述のソースファイルをビルド後、生成した公開ファイルをさくらのレンタルサーバへ rsyncを使ってアップしている。

公開鍵をさくらのレンタルサーバへ登録

下記手順で公開鍵ファイルを送信して、公開鍵の中身を authorized_keysに追加しているが、直接サーバ内の authorized_keysに公開鍵の中身をコピペしてもよい。

# ファイルを送信
scp /home/yourId/.ssh/id_ecdsa.pub hogeId@hogehoge.sakura.ne.jp:
# (中略)
# Are you sure you want to continue connecting (yes/no/[fingerprint])? 初めて接続する場合、yesで [Enter]
# (中略)
# hogeId@hogehoge.sakura.ne.jp's password: FTPサーバのパスワードを入力して [Enter]
# id_ecdsa.pub ... 100% ...

# ログイン
$ ssh hogeId@hogehoge.sakura.ne.jp
# FTPパスワードを入力してEnter
# Welcome to FreeBSD!

% # ログイン後、公開鍵の中身を authorized_keysに書き出し
cat id_ecdsa.pub >> /home/hogehoge/.ssh/authorized_keys
# フォルダとファイルのパーミッションを確認
# .sshフォルダのパーミッションは 700
# authorized_keys のパーミッションは 600
# ログアウト
% exit

# SSHでログインできるか確認
$ ssh hogeId@hogehoge.sakura.ne.jp
# Enter passphrase for key '/home/{ユーザー名}/.ssh/id_ecdsa': パスフレーズ入力 [Enter]でログインできれば OK

Windowsの PATHを一部だけ引き継ぎ

WSLでは、デフォルトで Windowsの PATH(/mnt/c/~)が通っている。WSLだとこれでも良かったが、弊害もあるようだ。何より WSL2では Windowsと別システムとして稼働していることもあり、/etc/wsl.confに下記を追記して、Windowsの PATHを引き継がないようにする。

[interop]
appendWindowsPath = false

ただし、システムコマンドは Windows側のものを利用したいので、.bashrcに下記を追記して PATHを通した。

# Windows PATH
export PATH="$PATH:/mnt/c/Windows:/mnt/c/Windows/System32"

この後、いったんターミナルを閉じ、Windowsシステムのサービス LxssManagerを再起動して、設定を反映させる。

hugoの環境構築

下記記事にまとめたスクリプトで hugoのインストールまでカバーしているので、環境変数のみ変更して再構築。hugoのバージョンは、いろいろあって v0.58.3としている。

参考サイト

冒頭写真について

冒頭写真で紹介したペンは、最近お気に入りの『ゼブラ クリッカート』。空気中の水分を吸収する新インクのおかげで、キャップがなくてもペン先が乾かない。発色もよく、カラーバリエーションも豊富。書き心地も気に入って、リモートワーク始まってからは、これで何でもメモ書きしてる。これで定価110円って、日本の文房具はホントすごい。

コメント

コメントなどありましたら、GitHubのディスカッションへお願いします。(書き込みには、GitHubのアカウントが必要です)
Googleブログ検索
Amazon検索
執筆者
"ぽぽろんち" @pporoch
pporoch120
Mono Worksの中の人。DQX内では "ぬここ" の中の人もやってます。好きなことをつらつらと書き留めてます。
"DQX@ぬここ(UD487-754)"
採用案内
// JS遅延読込み (function(window, document) { function main() { // GoogleAdSense読込み var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す // 旧コードの場合、コメントアウトしたままにする //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX'; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); } // 遅延読込み var lazyLoad = false; function onLazyLoad() { if (lazyLoad === false) { // 複数呼び出し回避 + イベント解除 lazyLoad = true; window.removeEventListener('scroll', onLazyLoad); window.removeEventListener('mousemove', onLazyLoad); window.removeEventListener('mousedown', onLazyLoad); window.removeEventListener('touchstart', onLazyLoad); window.removeEventListener('keydown', onLazyLoad); main(); } } window.addEventListener('scroll', onLazyLoad); window.addEventListener('mousemove', onLazyLoad); window.addEventListener('mousedown', onLazyLoad); window.addEventListener('touchstart', onLazyLoad); window.addEventListener('keydown', onLazyLoad); window.addEventListener('load', function() { // ドキュメント途中(更新時 or ページ内リンク) if (window.pageYOffset) { onLazyLoad(); } }); })(window, document);