プロキシサーバー経由WLSでvuetify環境構築まで

やりたいこと

windows10でWLSをダウンロードし、gitでのvue.jsプロジェクトを実行する
会社環境の為、プロキシーサーバー設定が必須なので、手間が掛かりました。

プロキシサーバー設定

C:\Users\userName>netsh winhttp show proxy
現在の WinHTTP プロキシ設定:
    直接アクセス (プロキシ サーバーなし)。
↑プロキシ設定してない状態
C:\Windows\system32>netsh winhttp import proxy source=ie

現在の WinHTTP プロキシ設定:

    プロキシ サーバー:  wwwxxxxxxxxxx.com:80
    バイパス一覧     :  

git インストール

$ git --version➡ないなら↓でインストール
$ sudo apt install git

git clone

$ git clone https://userName:@gitlab.devops.xxxx.xxx.xxx.git
Cloning into 'nextmail_2020'...
fatal: unable to access 'https://gitlab.devops.xxxx.xxx.xxx.git/': gnutls_handshake() failed: The TLS connection was non-properly terminated.
↑失敗したら以下の手順でプロキシーサーバーを設定してください

git プロキシー設定

$ sudo vi ~/.bashrc 
export HTTP_PROXY=http://xxxx.xxx.com:80
export HTTPS_PROXY=http://xxxx.xxx.com:80
git config --global http.proxy ${HTTP_PROXY}
git config --global https.proxy ${HTTPS_PROXY}
↓一応確認する
$ printenv HTTP_PROXY HTTPS_PROXY
http://wwwxxxx.xxx.xxx.com:80
https://wwwxxxx.xxx.xxx.com:80

参考記事：https://qiita.com/Gushi_maru/items/5ba23d997e32abc98620

ブランチ切り替え

$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/master
  remotes/origin/xxx
$ git checkout xxx
Branch 'xxx' set up to track remote branch 'xxx' from 'origin'.
Switched to a new branch 'mock'
$ git branch
  master
* xxx

apt設定

$ sudo apt update
$ sudo apt upgrade
$ sudo vi /etc/apt/apt.conf
Acquire::http::No-Cache true;
Acquire::http::Pipeline-Depth 0;
Acquire::http::Proxy "http://wwwxxxx.xxx.xxx.com:80";
Acquire::https::Proxy "http://wwwxxxx.xxx.xxx.com:80";
Acquire::ftp::proxy "http://wwwxxxx.xxx.xxx.com:80";

nodejsインストール

$ curl -sL https://deb.nodesource.com/setup_current.x | sudo -E bash -
↑gpg: can't connect to the agent: IPC connect call failed
エラーが出ましたら、一回無視してください。
$ sudo apt install -y nodejs npm　→　npmもついでにインストール

Yarnインストール

$ 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-get update && sudo apt-get install yarn
$ yarn -v
$ npm -v

VueCLIインストール手順（ubunts環境）

(yarnかnpmでインストール今回はyarnを使用)
$ yarn global add @vue/cli
$ vue --version

起動

$ cd xxxxxx →　gitのプロジェクトに移動
$ yarn serve (プロジェクトがすでにあるので、そのまま起動)
↑xxがないから起動できないエラーが出ます。
$ yarn install xx ➡　足りないPKGをインストール
$ yarn serve ➡再度起動
yarn serve　
Vue packages version mismatch:の為エラー
バージョン低いPKGを上げるのをおすすめします。
$ yarn serve ➡再度起動　
http://127.0.0.1:8080/　につながった

トラブルシューティング

curl時エラー

以下のコマンドを何回も実行する
sudo apt remove gpg
sudo apt install gnupg1

プロキシ設定後

wslの再起動を試す（Windowsのcmdコマンド環境で操作）
# net stop LxssManager
# LxssManager サービスを停止中です.
# LxssManager サービスは正常に停止されました。
# net start LxssManager
# LxssManager サービスを開始します.
# LxssManager サービスは正常に開始されました。

yarn/npm 通信refusedエラー

原因：プロキシサーバーが必要
$ sudo yarn(npm) config set proxy http://wwwxxx.xxx.xxx.com:80 -g
$ sudo yarn(npm) config set https-proxy http://wwwxxx.xxx.xxx.com:80 -g
$ yarn(npm) config list ➡　確認