仮想環境でJavaScriptの開発環境を構築

jyouji1979

仮想環境で環境を構築しましょう

MacOSの中です

Macでターミナルを開いて下さい。

ターミナル上で以下のコマンドを打っていってください。

ディレクトリ（フォルダ）作成（ターミナル上）

mkdir vagrant_for_react

作成したディレクトリ（フォルダ）に移動（ターミナル上）

cd vagrant_for_react

vagrantファイルの作成（ターミナル上）

vagrant init

Vagrantfileの編集（Vagrantfile）

Vagrant.configure("2") do |config|
  config.vm.box = "bento/centos-7.5"
end

仮想環境の起動（ターミナル上）

vagrant up

仮想マシンにログイン（ターミナル上）

vagrant ssh

JavaScript環境を構築

CentOSの中です

rootユーザーになります。パスワードはvagrantです。

su -

yumのアップデート

sudo yum -y update
cd /usr/local/src/

node.jsのダウンロード

curl -O https://rpm.nodesource.com/pub_8.x/el/6/x86_64/nodejs-8.4.0-1nodesource.el6.x86_64.rpm

node.jsのインストール

rpm -ivhU nodejs-8.4.0-1nodesource.el6.x86_64.rpm

yarnのインストール

npm install -g yarn

vagrantユーザーに戻る

exit

各種のバージョンの確認

node -v
npm -v
yarn -v

homeに戻る

cd
mkdir -p indecision-app/public
cd indecision-app/public/

index.htmlを編集する

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Indecesion App</title>
</head>
<body>
   <div id="app"></div>
   <script src="https://unpkg.com/react@16.0.0/umd/react.production.min.js"></script>
   <script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
   <script src="/scripts/app.js"></script>
</body>
</html>

live-serverをインストール

sudo npm install -g live-server

バージョンの確認

live-server -v
cd /home/vagrant/indecision-app/public
mkdir scripts

viコマンドに慣れてない方は、他のCyberDuckを通して編集して下さい。

vi scripts/app.js

このファイルを編集（scripts/app.js）

console.log('app');
cd /home/vagrant/indecision-app

live-serverの起動

live-server public

Mac上のブラウザからアクセスできます。ここにアクセスして下さい。

192.168.43.200:8080

「cmd + option + i」を同時に押して、コンソールを開き、「app」と表示されていれば、成功です。


いいなと思ったら応援しよう！