More than 3 years have passed since last update.

ubuntu18.04 on WSL 上に yarn-1.22 の環境を構築する手順メモ

Last updated at 2020-08-06Posted at 2020-03-27

はじめに

covid19対策（まとめ）サイトの開発環境の一つである yarn を WSL 上に構築するたの手順として、各所の構築手順をまとめただけのメモです。
covid19対策サイトは、各都道府県単位などで開発・公開されており、本家東京都版はGitHub https://github.com/tokyo-metropolitan-gov/covid19 にあります。

構築手順

WSLの導入

まず、Windows10 に WSL(Windows Subsystem for Linux)のubuntu 18.04 を導入します。
（追記）WSL2でも、Ubuntu 20.04でも導入手順は同じ。

参考：https://qiita.com/yasushi00/items/0e2bf042c14862c87ce2#%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB-1

nodeの導入

次に node を導入しますが、apt で入るものは古いので、一旦 apt で依存関係を含めて導入した後、最新版に差し替えます。
まず、aptで nodejsと npm をインストール

sudo apt install -y nodejs npm

次に n package を導入し、最新の node をインストール

sudo npm install n -g
sudo n stable

aptで入れた nodejs, npm を削除

sudo apt purge -y nodejs npm

再ログイン後、インストールした nodeのバージョンを確認

$ node -v
v12.16.1

/usr/local/bin/node だと実行できる場合は、/usr/local/bin にパスを通す。

yarnの導入

https://yarnpkg.com/en/docs/install#linux-tab に従ってインストール。

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update && sudo apt install -y yarn

インストールした yarn のバージョンを確認

$ yarn -v 
1.22.4

同時に入る nodejs は古いので削除。

sudo apt purge -f libuv1 nodejs

必要なパッケージのインストール

必要なパッケージ情報は、githubに登録されているので、まずクローンします（クローン済なら省略）。

cloneする前に自分のGitHubアカウントに fork （分岐コピー）することを推奨。fork手順は、https://qiita.com/FPC_COMMUNITY/items/b9cc072813dc2231b2b2 あたりを参照。

git clone GitHubのリポジトリのURL

クローンしたディレクトリに移動して、パッケージのインストールを実行

cd covid19  # cloneしたディレクトリ
yarn install

しばらく待つとパッケージのインストールされます。

ローカルサーバの起動

yarn dev

初回はビルドに時間がかかります。
ビルドが終わったら、http://localhost:3000 にアクセスして動作を確認。edge等の、Windows ブラウザで表示できます。

修正・更新

ソースやデータを編集すると、自動で更新されますので、しばらく待つとブラウザで確認できます。
実際に貢献する方法は、https://qiita.com/FPC_COMMUNITY/items/b9cc072813dc2231b2b2 などを参照。

参考

（おまけ）Windowsに直接導入する場合の一例

node.js

https://nodejs.org/ja/download/ から Windoss Installer (msi）をダウンロードし実行。

yarn

https://classic.yarnpkg.com/ja/ からインストーラーをダウンロードして実行

バージョン確認

コマンドプロンプトを立ち上げてバージョン確認

>node -v
v12.16.1
>yarn -v
1.22.4

yarnでパッケージインストールとサーバ起動

cd covid19  # cloneしたディレクトリ
yarn install # パッケージインストール

サーバ起動

.env で GENERATE_ENV=development を指定し http://localhost:3000 が表示できれば完了。

yarn dev # 起動

参照先

このページの内容は以下のリンク先を参考にさせていただきました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up