React CentOS7Create-React-Appinstall & setup

React アプリを Create React App で設置&設定する | CentOS 7.6

create-react-app-centos-quick-start2 React
スポンサーリンク

Node.js 10.x と npm 設置

curl –silent –location https://rpm.nodesource.com/setup_10.x | bash –

[root@centos7 ~]# curl --silent --location https://rpm.nodesource.com/setup_10.x | bash -

## Installing the NodeSource Node.js 10.x repo...
## Inspecting system...
+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m
## Confirming "el7-x86_64" is supported...
+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Downloading release setup RPM...
+ mktemp
+ curl -sL -o '/tmp/tmp.hCNn3p6Fo5' 'https://rpm.nodesource.com/pub_10.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'
## Installing release setup RPM...
+ rpm -i --nosignature --force '/tmp/tmp.hCNn3p6Fo5'
## Cleaning up...
+ rm -f '/tmp/tmp.hCNn3p6Fo5'
## Checking for existing installations...
+ rpm -qa 'node|npm' | grep -v nodesource
## Run `sudo yum install -y nodejs` to install Node.js 10.x and npm.
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn

[root@centos7 ~]#

yum -y install nodejs

[root@centos7 ~]# yum -y install nodejs
Loaded plugins: fastestmirror, langpacks
Loading mirror speeds from cached hostfile
...

Installed:
  nodejs.x86_64 2:10.16.0-1nodesource

Complete!
[root@centos7 ~]#

開発ツールを設置

ネイティブアドオンを構築するために設置します。 ( 任意 )

yum install gcc-c++ make

[root@centos7 ~]# yum install gcc-c++ make
...
86_64 already installed and latest version
Package 1:make-3.82-23.el7.x86_64 already installed and latest version
Nothing to do

Yarn パッケージマネージャを設置

curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo

[root@centos7 ~]# curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
[yarn]
name=Yarn Repository
baseurl=https://dl.yarnpkg.com/rpm/
enabled=1
gpgcheck=1
gpgkey=https://dl.yarnpkg.com/rpm/pubkey.gpg

[root@centos7 ~]#

yum -y install yarn

[root@centos7 ~]# yum -y install yarn
Loaded plugins: fastestmirror, langpacks
...

Installed:
  yarn.noarch 0:1.16.0-1

Complete!
[root@centos7 ~]#

create-react-app を設置

npm install create-react-app -g

[root@centos7 ~]# npm install create-react-app -g
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js
+ create-react-app@3.0.1
added 91 packages from 45 contributors in 12.067s

開発サーバ用のポートをオープン

firewall-cmd --add-port=3000/tcp --zone=public --permanent

Firewall をリロード

firewall-cmd --reload

React プロジェクトを作成

作成するプロジェクトの位置は任意です。ここでは /reactjs にしています。

create-react-app YOUR-PROJECT

[root@centos7 ~]# mkdir /reactjs
[root@centos7 ~]# cd /reactjs
[root@centos7 reactjs]# create-react-app YOUR-PROJECT

Creating a new React app in /reactjs/YOUR-PROJECT.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

yarn add v1.16.0
...

Done in 111.94s.

Success! Created YOUR-PROJECT at /reactjs/YOUR-PROJECT
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd YOUR-PROJECT
  yarn start

Happy hacking!

[root@centos7 reactjs]#

開発サーバを起動

HTTPS=true yarn start ← httpsで起動する

yarn start

[root@centos7 reactjs]#
[root@centos7 reactjs]# cd YOUR-PROJECT
[root@centos7 YOUR-PROJECT]# HTTPS=true yarn start
yarn run v1.16.0

ブラウザで確認

You can now view YOUR-PROJECT in the browser.

Local: https://localhost:3000/On
On Your Network: https://YOUR-IP-ADDRESS:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

参考文献

Getting Started
Using HTTPS in Development

スポンサーリンク

コメント

タイトルとURLをコピーしました