React を 触ってみた (1) – 開発環境

最終目標としては React + Redux + babel + webpack という環境 (??) で このブログのデータを 引っ張ってくる と言うものを作ってみようと思います

まずは 開発環境を vagrant で 作成しようと思います

---

開発環境作成

---

開発環境は vagrant で 作成しました

ディレクトリ構成は

react-vagrant
　-> html
　-> vagrant
　　-> [Vagrantfile]

と しています

Vagrantfile には
apache と node.js と npm を インストール するように記述しておきます

---

Vagrantfile

---

VAGRANT_NAME    = "react"
VAGRANT_NETWORK = "192.168.33.20"

Vagrant.configure("2") do |config|
  config.vm.hostname = VAGRANT_NAME
  config.vm.box = "centos/7"
  config.vm.network "private_network", ip: VAGRANT_NETWORK
  config.vm.synced_folder "../html/", "/var/www/html/", create: true, owner: 'vagrant', group: 'vagrant', mount_options: ['dmode=777,fmode=777']
  config.vm.provider "virtualbox" do |vb|
    vb.name = VAGRANT_NAME
  end
  config.vm.provision "shell", inline: <<-SHELL
    echo '# firewalld disable --------------------------------------------------------------------------------'
    systemctl stop firewalld
    systemctl disable firewalld

    echo '# SELinux disable ----------------------------------------------------------------------------------'
    setenforce 0
    sed -i.bak "/SELINUX/s/enforcing/disabled/g" /etc/selinux/config

    echo '# yum ----------------------------------------------------------------------------------------------'
    yum update -y

    echo '# nodejs & npm -------------------------------------------------------------------------------------'
    yum install -y epel-release
    yum install -y openssl
    yum install -y nodejs npm

    echo '# apache -------------------------------------------------------------------------------------------'
    yum install -y httpd
    systemctl start httpd
    systemctl enable httpd.service
  SHELL
end

vagrant ディレクトリに移動してから

cd ~/react-vagrant/vagrant/

Vagrant で 環境を作成します

vagrant up

ssh 接続します

vagrant ssh

---

開発環境

---

まずは react ディレクトリで 開発を進めようと思うので
対象のディレクトリに移動してから

cd /var/www/html/

npm で パッケージを 管理するための 初期化処理を行います
対話式なので 質問に答えていけば OKです

npm init

質問に答え終わると package.json が 作成されます

とりあえず 今回は ここまでということで!!