vvv28vvv Wiki*

VirtualBox+CentOS7

インストールディスクのダウンロード
https://www.centos.org/download/
から「DVD ISO」をクリックし、適当なサイトからダウンロード。

VirtualBox構築
ISOファイルを使用してVirtualBoxからCentOSの環境を構築。

※タイプ：Linux
　バージョン：Red Hat(64-bit)
　を選択。

CentOSインストール
詳細は任意だが、GUIが使いたかったので、ソフトウェアの選択で「GNOME Desktop」を選択した。

node.jsインストール

https://nodejs.org/ja/

によると、推奨版は10.16.0らしい。
とりあえずバージョン10で。

リポジトリを追加
# curl -sL https://rpm.nodesource.com/setup_10.x | sudo bash -

インストール
# yum install nodejs

確認
# node -v
v10.16.0

Angularインストール

インストール（グローバルインストール）
# npm install -g @angular/cli

確認

# ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.2
Node: 10.16.0
OS: linux x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.800.2
@angular-devkit/core         8.0.2
@angular-devkit/schematics   8.0.2
@schematics/angular          8.0.2
@schematics/update           0.800.2
rxjs                         6.4.0

どうやらバージョン8になってるらしい。いつの間に・・・。

テンプレートの取得、実行

任意のフォルダに、適当なテンプレートをgit cloneする。

テンプレート取得（とりあえず「NGX Admin」を使ってみる）
# git clone https://github.com/akveo/ngx-admin.git

npmインストール
# npm install

実行
# npm start

起動したら、ブラウザから
http://localhost:4200
にアクセスする。

VSCodeのインストール

https://code.visualstudio.com/docs/setup/linux#_rhel-fedora-and-centos-based-distributions
の通りにコマンドを打つだけ。

# sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc

# sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'

# yum check-update

# sudo yum install code

再起動すると、アプリケーションにショートカットが追加される。

日本語化
VSCodeのメニューより、
「Japanese Language Pack for Visual Studio Code」
を検索し、インストールする。

その他インストール

Chrome
# vi /etc/yum.repos.d/google.chrome.repo

以下を記入して保存

[google-chrome]
name=google-chrome
baseurl=http://dl.google.com/linux/chrome/rpm/stable/$basearch
enabled=1
gpgcheck=1
gpgkey=https://dl-ssl.google.com/linux/linux_signing_key.pub

# yum update

# yum install google-chrome-stable

VSCodeからChromeでデバッグする
・VSCodeでDebugger for Chromeをインストール
・launch.jsonにデバッグ構成を追加

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

あとは、VSCodeのデバッガで起動すればブレイクなどを使用できる。

GitのUpdate(→2.22.0)
VSCodeを開くたびにGitを最新にするように警告が出る。
最新にしよう。

# yum remove git

# yum -y install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker autoconf

# cd /usr/local/src/

# wget https://www.kernel.org/pub/software/scm/git/git-2.22.0.tar.gz

# tar vfx git-2.22.0.tar.gz

# cd git-2.22.0/

# make configure

# ./configure --prefix=/usr

# git --version

# make all

# make install

# git --version

git version 2.22.0

サーバプロジェクト作成（Express）

Expressインストール（グローバルインストール）
# npm install -g express

Expressのプロジェクト作成のため、generatorもインストール
# npm install -g express-generator

任意の場所でExpressのプロジェクトを作成
$ express sampleapp

・・・以降、
https://qiita.com/teracy55/items/630d5294ed4058bcfa7f
が分かりやすいので、ここを参考に。

VS Code 1.53はCentOS7で動かない

https://blog.s2terminal.com/vscode-1-53-not-working-centos-7

以下のコマンドで1.52まで戻す。

yum downgrade code

指定バージョンまで一気に戻したい場合は、以下のコマンドでバージョンを確認し、

yum --showduplicate list code
code.x86_64 1.54.0-1614738615.el7 @code
利用可能なパッケージ
code.x86_64 1.9.1-1486597190.el7 code
code.x86_64 1.10.0-1488387854.el7 code
code.x86_64 1.10.1-1488415350.el7 code
・
・
・

以下で戻す。（上のリストにあるバージョンにしか戻せない。）

sudo yum downgrade code-1.52.1-1608137084.el7

CentOS7+node.js+angular