What's New Qiita

20190413のReactに関する記事は8件です。

  • 投稿日：2019-04-13T23:20:30+09:00

てっとり早くReact.jsが導入されたElectronアプリを作成する。

雛形がGitHub上に公開されています。なのでそれをクローンするだけです。

必要最低限の構成が良い方はこちら
React + Babel + Webpack
https://github.com/alexdevero/electron-react-webpack-boilerplate

いろいろマシマシな構成が良い方はこちら
React + Redux + React Router + Webpack + React Hot Loader
https://github.com/electron-react-boilerplate/electron-react-boilerplate

導入方法はそれぞれのRepositoryのREADME.mdに書いてあるので割愛します。

フロントエンドの技術に明るい方はマシマシな構成が良いと思います。
自分は初心者なので最小構成の方を選びました。便利だけどよく分からないパッケージがあると混乱するので。
ReactとかElectronの技術に慣れ親しんできたらマシマシな構成を使いたいですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T22:24:51+09:00

react-create-app と firebase を連携! firebase使用プロジェクトにおいてホットリロードをONに

最近、reactの勉強を初めたんですが、firebaseを使ってTwitterのauthenticationを行いたいなと思った矢先、firebaseの導入は簡単にできたものの1つの問題が生じました。

firebase serve ではホットリロードが行われない！！！！！

ということで、今回は定番のボイラープレート [create-react-app] を使った雛形上で、Webpack Dev ServerとFirebase serve　を同時に使う方法について書きたいと思います。

方法

  1. コマンド create-react-app test-app
  2. コマンド yarn add firebase-tools superstatic
  3. エディタで node_modules/react-scripts/config/webpack.config.jsを開く
  4. 以下のコードを追加
webpack.config.js
// firebaseホットリロード(ここのパスは環境によって若干変わるかもしれないので適意)
const firebaseConfig = require("./../../firebase-tools/lib/config").load({
  cwd: process.cwd()
});
・
・
・
・
module.exports = function(webpackEnv) {
・
・
return {
　・
　・,
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    before(app) {
      app.use(
        require("superstatic")({ config: firebaseConfig.data.hosting })
      );
    }
  },
　・
　・
}
}

yarn start もしくは npm start　でサーバーを立ち上げるとできると思います。

今回はcreate-react-appボイラーを使ったためこのようになりましたが、もしもこのボイラーを使わない場合は、同様に webpack.config.jsの webpack-dev-serverの部分に記述をすれば良いと思います。

以下に備忘録としてそれぞれの意味を書いておきます。

superstatic

Superstatic-NPM

Superstatic is an enhanced static web server that was built to power. It has fantastic support for HTML5 pushState applications, clean URLs, caching, and many other goodies.

要するに http-server と同じようなものでHTTPサーバーを立てるもの(てことは http-serverでも代替可能)

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T21:25:23+09:00

ReactでHello Worldをする前に...

概要

業務でReactを扱わせていただく機会が増え、ただコーディングできるだけではなく、『しっかりReactの中身を理解したい』と思い、まずは簡単にですが自分がReactについて調べたことをまとめたいと思います。この他にも、Reactを扱う上でこの知識は抑えておけ！というものがございましたら、キーワードや参考サイトなどのご教授をよろしくお願いいたします。

前回の記事
ReactでHelloWorldをしてみよう！

Reactとは

WebアプリケーションのUIを実装するためのJavaScriptライブラリーです。
2013年にSNSで有名なFacebook社より公開され、2017年にMITにライセンスが変更されました。
スクリーンショット 2019-04-13 21.09.36.png

使用例

Qiitaはもちろんのこと多くの有名なサービスで使用されているようです。

Reactの公式ページ

スクリーンショット 2019-04-13 19.28.24.png

facebook

スクリーンショット 2019-04-13 19.33.16.png

udemy

スクリーンショット 2019-04-13 19.29.12.png

slack

スクリーンショット 2019-04-13 19.28.41.png

Qiita

スクリーンショット 2019-04-13 19.34.03.png

NETFLIX

スクリーンショット 2019-04-13 19.27.19.png

Airbnb

スクリーンショット 2019-04-13 19.26.06.png

Reactは『はやい』

DOM(Document Object Model)

いきなり仮想DOMについて書くのではなく、まずは、DOM(Document Object Model)に関して簡単にご説明させていただきたいと思います。一言で言うと、『HTMLやXMLで作られたドキュメントをプログラム（JavaScript）から直接操作するための仕組み』のことです。ブラウザでページを見る時にDOMは作られます。詳しくはこちらから。

Webブラウザでページを表示するとき、従来は基本的に受け取った情報を基に毎回１からDOMを作成しブラウザに描画を行うことが多く、ページの表示が遅くなってしまいます...
スクリーンショット 2019-04-13 20.36.33.png
画像：https://www.odorikoblog.net/entry/internet/

これを克服しようと考え出されたのがReactで実装されている仮想DOM（virutual DOM）です！

仮想DOM（virutual DOM）

実際のDOMと対になる仮のDOMのことで、DOMよりもはやく作れるように設計されています。

Reactでは、情報を受け取ってもすぐにDOMを作らずに、仮想DOM（virutual DOM）を作ります。そして、変更前の仮想DOMと変更後の仮想DOMを比較し、変更のあった箇所だけDOMを再構築し常に最小のコストでWebページをレンダリングできるようになり、非常に高速に動作します。
スクリーンショット 2019-04-13 20.40.35.png
画像：https://speakerdeck.com/risagon/reactha-hayai?slide=13

もうjQuery（ジェイクエリー）はいらない！？

このような記事『You Don't Need jQuery』を見つけました。
しかし、もちろんReactが常に万能なわけではないようです。

複雑で動的なアプリほど向いているけど、HTMLが主役で動的な要素が少ないサイトや1日でコーディングが終わるようなサイトは、jQueryで特に困りません。大雑把ですが、作ろうとしているものが「記事（HTMLが9でJavaScriptが1）」なのか「アプリ（HTMLが1でJavaScriptが9）」なのかで分けるという指針でいいと思います。もちろんReactが向いているのは後者。普段の仕事内容によって「もう一生jQuery要らない」って人もいれば「一生jQueryしか要らない」って人もいていいと思います。

作りたいサービスによってはjQueryの方が簡単に実装できることもあるようですので、ReactとjQueryそれぞれのメリット、デメリットをしっかり把握した上で今後の開発に取り組んでいきたいと思います！

リファレンス

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T21:16:51+09:00

Electron + Express + React で Web・デスクトップ共通のアプリを作る

Electron + Express.js + React を使ってWebアプリとデスクトップアプリを共通のコードで作ってみたいと思います。

今回作成したコードは github に置いてあります。

参考にしたサイト

想定しているターゲット

あまり無いとは思いますが，普段，サーバに繋がる環境ではブラウザからアクセスしてアプリを実行するけど，稀にサーバに繋がらないスタンドアロンの環境でもアプリを実行するようなケースを想定しています。

動作確認環境

  • OS macOS Mojave
  • Electron 4.0.6
  • Express.js 4.16.0
  • React 16.8.6
  • Node.js v11.6.0

それでは早速ですが，アプリの雛形生成に express-generator を使用するので、インストールを行います。

$ npm install -g express-generator

"sample-app" という名前でアプリケーションを作成します。

$ express sample-app
$ cd sample-app

必要なパッケージをインストールします。

$ npm install

この時点で動作確認してみます。以下のコマンドを実行して

$ npm start

ブラウザで localhost:3000 にアクセスすると以下のような画面が表示されるはずです。

01.png

Electron のセットアップ

以下のコマンドで Electron をインストールします。

$ npm install --save-dev electron

続いて、app.js と同じ場所に main.js を作成します。

main.js
// Start Express
const expressApp = require('./app')
expressApp.listen(3000, '127.0.0.1')

// Electronのモジュール
const electron = require('electron')

// アプリケーションをコントロールするモジュール
const app = electron.app

// ウィンドウを作成するモジュール
const BrowserWindow = electron.BrowserWindow

// メインウィンドウはGCされないようにグローバル宣言
let mainWindow

// 全てのウィンドウが閉じたら終了
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// Electronの初期化完了後に実行
app.on('ready', () => {
  // メイン画面の表示。ウィンドウの幅、高さを指定できる
  mainWindow = new BrowserWindow({ width: 800, height: 600 })
  mainWindow.loadURL('http://127.0.0.1:3000')

  // ウィンドウが閉じられたらアプリも終了
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

package.json に以下の一行を追加します。

  "main": "main.js",

以下のコマンドを実行して動作確認します。

$ npx electron .

以下のような画面が表示されれば成功です。

02.png

npm-run-all で Web と Electron を同時に起動する

必須ではありませんが，一つのコマンドで Web サーバと Electron のアプリを同時に起動できると便利な事が多いのでここで設定しておきます。

npm-run-all という複数のタスクを同時に起動するパッケージを使用して、Web と Electron を同時に起動できるようにします。

まず以下のコマンドで npm-run-all をインストールします。

$ npm install --save-dev npm-run-all

次に package.json を以下のように修正します。

package.json
  "scripts": {
    "start": "node ./bin/www",
    "electron": "electron .",
    "dev": "npm-run-all --parallel electron start",
    "package": "npx electron-packager . sample-app --platform=darwin --arch=x64 --overwrite"
  }

これで以下のコマンドで Web サーバと Electron アプリが同時に起動できるようになりました。

$ npm run dev

React の追加

下記のコマンドで React のパッケージをインストールします。

npm install --save react react-dom

Jade は使用しないので削除しておきます。

npm uninstall --save jade

まずは Hello World を作成してみます。

public/index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="javascripts/app.js" charset="utf-8"></script>
  </body>
</html>

"Hello, world" を返す React のコンポーネントを作成します。

src/index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
)

これでソース自体の作成は完了です。後は実行するための設定を行います。

不要な処理・ファイルの削除

"express-generator" が作成したファイル・コードの中で不要になったものを削除します。

$ rm routes/*.js
$ rm -rf views

app.js の以下の行を削除します。

app.js
var indexRouter = require('./routes/index')
var usersRouter = require('./routes/users')

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'jade')

app.use('/', indexRouter)
app.use('/users', usersRouter)

Babel と Webpack の設定

JSX から JavaScript への変換に使用する Babel のインストールと設定行います。

$ npm install --save-dev babel babel-core babel-loader@7 babel-preset-env babel-preset-react

.babelrc に以下の内容を記述します。

.babelrc
{
  "presets": ["env", "react"]
}

Webpack のインストール

$ npm install --save-dev webpack webpack-cli

$ npm install --save-dev babel-loader css-loader style-loader
package.json
  "build": "webpack -d"
wabpack.config.js
const path = require('path')
module.exports = {
  mode: 'development',
  entry: {
    app: path.join(__dirname, 'src/index.js')
  },
  output: {
    path: path.join(__dirname, 'public/javascripts'),
    filename: '[name].js'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }, {
        test: /\.css$/,
        loader: ['css-loader', 'style-loader']
      }
    ]
  }
}

この時点で以下のコマンドを実行すると

$ npm run build
$ npm run dev

以下のような画面が表示され、またブラウザで localhost にアクセスすると同様な画面が表示されると思います。

hello_world.png

React と Express の連携

月並みですが，サーバ側（Express）でおみくじの結果を生成して画面に表示する処理を実装してみたいと思います。

クライアントからサーバへのAjax通信には "SuperAgent" を使うのではじめにインストールしておきます。

$ nom install --save superagent

サーバ側の実装

"/api/kuji" にアクセスされると "{result: '大吉'}" のような JSON データを返す API を実装します。

routes/kuji.js
var express = require('express')

var router = express.Router()

const kuji = ['大吉', '吉', '凶']

const get_kuji = () => {
  const rnd = Math.floor(Math.random() * kuji.length)
  return kuji[rnd]
}

// GET /api/kuji で呼ばれる関数
router.get('/', (req, res) => {
  res.json({result: get_kuji()})
})

module.exports = router
app.js
var kuji = require('./routes/kuji')

app.use('/api/kuji', kuji)

この時点で，npm start でサーバを起動してブラウザから http://localhost:3000/api/kuji へアクセスすると以下のような JSON のデータが表示されるはずです。

api.png

クライアント側の実装

画面上の「ひく」ボタンをクリックすると，おみくじの結果が画面に表示されるコンポーネントを作成します。

/src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import request from 'superagent'

class Kuji extends React.Component {
  constructor(props) {
    super(props)
    // デフォルトの state を設定
    this.state = { result: '' }
    // api() の中で this にアクセスできるよう bind しておく
    this.api = this.api.bind(this)
  }

  // サーバ側にアクセス（GET /api/kuji）して結果を取得して state に格納する
  api () {
    request.get('api/kuji').end((err, res) => {
      if (err) {
        console.log(err)
        return
      }
      const result = res.body.result
      this.setState({ result: result })
    })        
  }

  render () {
    return (
      <div>
        <p>{this.state.result}</p>
        <button onClick={ e => this.api() }>ひく</button>
     </div>
    )
  }
}

ReactDOM.render(
  <Kuji />,
  document.getElementById('root')
)

この時点で以下のコマンドを実行して

$ npm run build
$ npm run dev

画面上の「ひく」ボタンをクリックすると以下のような画面が表示されると思います。

kuji.png

以上で終わりです。通常の Express, React でアプリを書いたコードがそのままネイティブアプリ化できるのは便利なケースもあるのではないかと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T18:42:04+09:00

WebStormとDockerでコンテナ内に依存ライブラリを閉じ込めてReactの開発環境を作成

ローカル環境に色々入れずに開発環境をDocker上で構築したいけど、コーディングはIDEを使いたいので自分が辿り着いた手順をまとめました。
似たようなことをすればIntelliJ, PyCharm, GoLand, RubyMine, PhpStormでもできそう。

前提

  • WebStorm(or IntelliJ)をインストールしている
  • MacでDocker for Macをインストールしている

WebStormで新規Project作成

[File] -> [New] -> [Project]
image.png

[Empty Project]を選択し、Locationにプロジェクト名を設定して[CREATE]

Setting Value Remark
Location: {PROJECT PATH} PATHの末尾がプロジェクト名

image.png

空のプロジェクトが作成される
image.png

Dockerの設定

コマンドラインかWebStormのGUIのどちらかで設定すれば良い

Dockerfileを利用してコマンドラインで設定する場合

Terminalで以下を実行したあと、Ctrl ＋ p->Ctrl ＋ qで接続したコンテナから抜ける

[LOCAL]$ docker run \
-it \
-p 13000:3000 \
-v {PROJECT PATH}:/app \
--name {CONTAINER NAME} \
-w /app \
node:lts-alpine
Setting Value Remarks
-p 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする。何個も起動させる場合、HOST側のportは重ならないように変えること。
-v {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリと先ほどLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる。
--name {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
-w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

WebStormのDockerプラグインで設定する場合

[WebStorm] -> [Preferences...] で [Build, Execution, Deployment]にあるDockerの設定画面を選択し、+ボタンで新規作成
image.png
image.png

Docker for Macを利用しているので、これを選択し適当に名前をつけて[OK]を選択
image.png

（今回は画面の左下に）Dockerのタブが現れたので▷(Connect)を押すと、ConnectedとなりContainersとImagesというのが表示される
image.png
image.png

Imagesを選択してPull Image
image.png

今回はnode:lts-alpineを利用

Setting Value Remarks
Registry: registry.hub.docker.com デフォルトの設定
Repository: node
Tag: lts-alpine ここは好きなのを選んで良い。今回は軽量と聞くalpineのlts版にした

image.png

Imagesに選択したDockerのimageが表示される
image.png

このimageからコンテナ作成のため+->Create..
image.png
image.png

コンテナ起動の設定を以下のようにしてRUN

Setting Value Remarks
Container name: {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
Bind ports: 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする
Bind mounts: {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリとLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる
Run options: -w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

image.png

Deploy logにコンテナ作成が成功されたログが表示されればOK
image.png

TerminalからDockerコンテナに接続してプロジェクト作成

# コンテナの起動確認
[LOCAL]$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED              STATUS              PORTS                     NAMES
febece633a44        aa57b0242b33        "node"              About a minute ago   Up About a minute   0.0.0.0:13000->3000/tcp   node-docker

# コンテナへ接続
[LOCAL]$ docker exec -it node-docker /bin/sh
/app #

ここからdocker上での実行コマンド
コンテナシェルのPS1部分/app #は[DOCKER]$に読みかえてる
https://facebook.github.io/create-react-app/docs/adding-typescript を参考にtypescriptのReactプロジェクトを作成

# nodeのversion確認
[DOCKER]$ node --version
v10.15.3

# /appディレクトリにプロジェクト作成
[DOCKER]$ npx create-react-app /app --typescript
npx: installed 63 in 3.522s

Creating a new React app in /app.

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

yarn add v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
├─ @types/jest@24.0.11
├─ @types/node@11.13.4
~ 省略 ~

Your tsconfig.json has been populated with default values.


Success! Created app at /app
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 /app
  yarn start

Happy hacking!

Dockerコンテナの/appディレクトリに作成されたプロジェクトがWebStorm上からも見えるようになった!!
image.png

動作確認

# デフォルトプロジェクトの起動
[DOCKER]$ yarn start
~省略
Compiled successfully!

You can now view app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

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

ブラウザでhttp://localhost:13000/ へアクセスし、デフォルトアプリが表示されることが確認できた！
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T18:42:04+09:00

Dockerコンテナに依存関係は全て閉じ込めてWebStormで開発 ~ローカルを汚さずにReactやFirebaseの環境構築を簡単に~

ローカル環境に色々入れずに開発環境をDocker上で構築したいけど、コーディングはIDEを使いたいので自分が辿り着いた手順をまとめました。
似たようなことをすればIntelliJ, PyCharm, GoLand, RubyMine, PhpStormでもできそう。

できること

  • ローカルPCにnodeなどを入れずにReactやFirebaseのアプリを開発できる
  • Firebaseの複数プロジェクトに対してデプロイしたい場合、アプリのディレクトリごとにFirebaseプロジェクトを割り当てられるので毎回firebase loginで切り替えずにデプロイできる

前提

  • WebStorm(or IntelliJ)をインストールしている
  • MacでDocker for Macをインストールしている

WebStormで新規Project作成

[File] -> [New] -> [Project]
image.png

[Empty Project]を選択し、Locationにプロジェクト名を設定して[CREATE]

Setting Value Remark
Location: {PROJECT PATH} PATHの末尾がプロジェクト名

image.png

空のプロジェクトが作成される
image.png

Dockerの設定

コマンドラインかWebStormのGUIのどちらかで設定すれば良い

Dockerfileを利用してコマンドラインで設定する場合

Terminalで以下を実行したあと、Ctrl ＋ p->Ctrl ＋ qで接続したコンテナから抜ける

[LOCAL]$ docker run \
-it \
-p 13000:3000 \
-v {PROJECT PATH}:/app \
--name {CONTAINER NAME} \
-w /app \
node:lts-alpine
Setting Value Remarks
-p 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする。何個も起動させる場合、HOST側のportは重ならないように変えること。
-v {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリと先ほどLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる。
--name {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
-w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

WebStormのDockerプラグインで設定する場合

[WebStorm] -> [Preferences...] で [Build, Execution, Deployment]にあるDockerの設定画面を選択し、+ボタンで新規作成
image.png
image.png

Docker for Macを利用しているので、これを選択し適当に名前をつけて[OK]を選択
image.png

（今回は画面の左下に）Dockerのタブが現れたので▷(Connect)を押すと、ConnectedとなりContainersとImagesというのが表示される
image.png
image.png

Imagesを選択してPull Image
image.png

今回はnode:lts-alpineを利用

Setting Value Remarks
Registry: registry.hub.docker.com デフォルトの設定
Repository: node
Tag: lts-alpine ここは好きなのを選んで良い。今回は軽量と聞くalpineのlts版にした

image.png

Imagesに選択したDockerのimageが表示される
image.png

このimageからコンテナ作成のため+->Create..
image.png
image.png

コンテナ起動の設定を以下のようにしてRUN

Setting Value Remarks
Container name: {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
Bind ports: 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする
Bind mounts: {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリとLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる
Run options: -w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

image.png

Deploy logにコンテナ作成が成功されたログが表示されればOK
image.png

Reactのプロジェクト作成

TerminalからDockerコンテナに接続して、Docker上にReactプロジェクトを作成する

# コンテナの起動確認
[LOCAL]$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED              STATUS              PORTS                     NAMES
febece633a44        aa57b0242b33        "node"              About a minute ago   Up About a minute   0.0.0.0:13000->3000/tcp   node-docker

# コンテナへ接続
[LOCAL]$ docker exec -it node-docker /bin/sh
/app #

ここからdocker上での実行コマンド
コンテナシェルのPS1部分/app #は[DOCKER]$に読みかえてる
https://facebook.github.io/create-react-app/docs/adding-typescript を参考にtypescriptのReactプロジェクトを作成

# nodeのversion確認
[DOCKER]$ node --version
v10.15.3

# /appディレクトリにプロジェクト作成
[DOCKER]$ npx create-react-app /app --typescript
npx: installed 63 in 3.522s

Creating a new React app in /app.

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

yarn add v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
├─ @types/jest@24.0.11
├─ @types/node@11.13.4
~ 省略 ~

Your tsconfig.json has been populated with default values.


Success! Created app at /app
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 /app
  yarn start

Happy hacking!

Dockerコンテナの/appディレクトリに作成されたプロジェクトがWebStorm上からも見えるようになった!!
image.png

動作確認

# デフォルトプロジェクトの起動
[DOCKER]$ yarn start
~省略
Compiled successfully!

You can now view app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

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

ブラウザでhttp://localhost:13000/ へアクセスし、デフォルトアプリが表示されることが確認できた！
image.png

あとは好きに開発するだけ!!

FirebaseプロジェクトごとにDocker開発環境を作成

WebStormで新規Project作成しておく

# firebaseを利用するためまずはnodeのimageからコンテナを起動させる
[LOCAL]$ docker run \
-it \
--name firebase-skeleton \
-v {WEBSTORM PROJECTPATH}:/app \
-w /app \
node:lts-alpine

# 起動したコンテナに接続する
[LOCAL]$ docker exec -it firebase-skeleton /bin/sh

# firebaseのツールをインストール
[DOCKER]$ npm install -g firebase-tools
# 手順にしたがって利用したいgoogleアカウントでログインする
[DOCKER]$ firebase login --no-localhost
# Firebaseプロジェクトを選択or新規作成し、セットアップする(今回はCloud Functionsをセットアップ)
[DOCKER]$ firebase init functions

# ログイン状態のコンテナをcommitしてimage化する
[LOCAL]$ docker stop firebase-skeleton
[LOCAL]$ docker commit firebase-skeleton {FIREBASE PROJECT NAME}:{YOUR TAG}
# 不要になったコンテナは削除
[LOCAL]$ docker rm firebase-skeleton

# imageが作成されていることの確認
[LOCAL]$ docker images
REPOSITORY                  TAG                 IMAGE ID            CREATED             SIZE
{FIREBASE PROJECT NAME}     {YOUR TAG}          c939d073f6a0        8 seconds ago       297MB
node                        lts-alpine          aa57b0242b33        4 days ago          71MB

# 指定したFirebaseプロジェクトにログイン状態のimageをコンテナ起動
[LOCAL}$ docker run \
-it \
--name {CONTAINER NAME} \
-v {WEBSTORM PROJECTPATH}:/app \
-w /app \
myfirebase/{FIREBASE PROJECT NAME}:{YOUR TAG}

WebStormでファイルを修正できるようになるのでfunctionを作成
今回はTypeScriptでCloud Functionsを作成するのでfunctions/src/index.tsをWebStormから変更
image.png

index.ts
import * as functions from 'firebase-functions';

export const helloWorld = functions.https.onRequest((request, response) => {
 response.send("Hello from Firebase!!!!");
});

動作確認

ログイン状態のimageを利用しているのでloginせずにFirebaseへデプロイできる!!

# 起動したコンテナに接続する
[LOCAL]$ docker exec -it {CONTAINER NAME} /bin/sh

# functionを作成してデプロイ(init時にTypeScriptを選択していると、このコマンド内でtsのコンパイルもしてくれる)
[DOCKER]$ firebase deploy --only functions
~省略~
✔  functions: Finished running predeploy script.
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (33.39 KB) for uploading
✔  functions: functions folder uploaded successfully
i  functions: creating Node.js 6 function helloWorld(us-central1)...
✔  functions[helloWorld(us-central1)]: Successful create operation. 
Function URL (helloWorld): https://XXXXXXX.cloudfunctions.net/helloWorld

✔  Deploy complete!

Please note that it can take up to 30 seconds for your updated functions to propagate.
Project Console: https://console.firebase.google.com/project/{FIREBASE PROJECT NAME}/overview

Function URLで表示されたURLへアクセス
image.png

これで複数のFirebaseプロジェクトへデプロイしたい場合に、ローカルでloginを切り替えずに実行できる!!

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T18:42:04+09:00

WebStormとDockerでlocalにnodeを入れずにReactの開発環境を作成

前提

  • WebStorm(or IntelliJ)をインストールしている
  • MacでDocker for Macをインストールしている

WebStormで新規Project作成

[File] -> [New] -> [Project]
image.png

[Empty Project]を選択し、Locationにプロジェクト名を設定して[CREATE]

Setting Value Remark
Location: {PROJECT PATH} PATHの末尾がプロジェクト名

image.png

空のプロジェクトが作成される
image.png

Dockerの設定

コマンドラインかWebStormのGUIのどちらかで設定すれば良い

Dockerfileを利用してコマンドラインで設定する場合

Terminalで以下を実行

[LOCAL]$ docker run \
-it \
-p 13000:3000 \
-v {PROJECT PATH}:/app \
--name {CONTAINER NAME} \
-w /app \
node:lts-alpine
Setting Value Remarks
-p 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする。何個も起動させる場合、HOST側のportは重ならないように変えること。
-v {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリと先ほどLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる。
--name {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
-w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

WebStormのDockerプラグインで設定する場合

[WebStorm] -> [Preferences...] で [Build, Execution, Deployment]にあるDockerの設定画面を選択し、+ボタンで新規作成
image.png
image.png

Docker for Macを利用しているので、これを選択し適当に名前をつけて[OK]を選択
image.png

（今回は画面の左下に）Dockerのタブが現れたので▷(Connect)を押すと、ConnectedとなりContainersとImagesというのが表示される
image.png
image.png

Imagesを選択してPull Image
image.png

今回はnode:lts-alpineを利用

Setting Value Remarks
Registry: registry.hub.docker.com デフォルトの設定
Repository: node
Tag: lts-alpine ここは好きなのを選んで良い。今回は軽量と聞くalpineのlts版にした

image.png

Imagesに選択したDockerのimageが表示される
image.png

このimageからコンテナ作成のため+->Create..
image.png
image.png

コンテナ起動の設定を以下のようにしてRUN

Setting Value Remarks
Container name: {CONTAINER NAME} 起動したコンテナにつける名前。今回はnode-dockerとしている。
Bind ports: 13000:3000 HOST:DOCKERの順で設定し、DockerコンテナのportへLocalからアクセスできるようにする
Bind mounts: {PROJECT PATH}:/app HOST:DOCKERの順で設定し、Dockerコンテナの/appディレクトリとLocalで作成したWebStormのプロジェクトディレクトリへ同期させることができる
Run options: -w app コンテナ起動時に/appディレクトリを作成してコンテナへ接続した時のデフォルトディレクトリになる

image.png

Deploy logにコンテナ作成が成功されたログが表示されればOK
image.png

TerminalからDockerコンテナに接続してプロジェクト作成

# コンテナの起動確認
[LOCAL]$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED              STATUS              PORTS                     NAMES
febece633a44        aa57b0242b33        "node"              About a minute ago   Up About a minute   0.0.0.0:13000->3000/tcp   node-docker

# コンテナへ接続
[LOCAL]$ docker exec -it node-docker /bin/sh
/app #

ここからdocker上での実行コマンド
コンテナシェルのPS1部分/app #は[DOCKER]$に読みかえてる
https://facebook.github.io/create-react-app/docs/adding-typescript を参考にtypescriptのReactプロジェクトを作成

# nodeのversion確認
[DOCKER]$ node --version
v10.15.3

# /appディレクトリにプロジェクト作成
[DOCKER]$ npx create-react-app /app --typescript
npx: installed 63 in 3.522s

Creating a new React app in /app.

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

yarn add v1.13.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 13 new dependencies.
info Direct dependencies
├─ @types/jest@24.0.11
├─ @types/node@11.13.4
~ 省略 ~

Your tsconfig.json has been populated with default values.


Success! Created app at /app
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 /app
  yarn start

Happy hacking!

Dockerコンテナの/appディレクトリに作成されたプロジェクトがWebStorm上からも見えるようになった!!
image.png

動作確認

# デフォルトプロジェクトの起動
[DOCKER]$ yarn start
~省略
Compiled successfully!

You can now view app in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.2:3000/

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

ブラウザでhttp://localhost:13000/ へアクセスし、デフォルトアプリが表示されることが確認できた！
image.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2019-04-13T17:06:15+09:00

【爆速】静的ページを無料で独自ドメインでSSL(HTTPS)で公開する方法（Github => CircleCI => AWS S3 / Firebase Hosting / Netlify）

はじめに

  • 静的ページを爆速で公開したい！！（React）
  • 独自ドメインを使いたい！！（Route53）
  • SSL(HTTPS)対応にしたい！！
  • masterマージしたら、自動でデプロイしてたい！！（Github）

今回無知ゆえ、3回もアーキテクチャを変えたので備忘録として残します。

① Github => CircleCI => AWS S3
② Github => CircleCI => Firebase Hosting
③ Github => Netlify

① Github => CircleCI => AWS S3

以下、リンクを参考にわりと簡単に構築できました。
ただCircleCI設定ファイルの記述方法のキャッチアップは必要でした。
DockerやVM環境による差異や、CircleCI自体のバージョンによる差異があります。
ちなみにバージョン1.0でもCircleCIのGUI上で、credentialをベタ書きすればWarning出ますが動きます。

またLet's EncryptのSSL証明書をcronか、Lambdaなどで自動化する構成にしようと考えていました。

＿人人人人人人人人人人人人人人人人人人人人人人人人＿
＞　Firebase Hostingだと、よしなにSSLできるよ?　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

② Github => CircleCI => Firebase Hosting

こちらも以下、リンクを参考にわりと簡単に構築できました。
世の中便利ですね本当に。。。

＿人人人人人人人人人人人人人人人人人人人人人＿
＞　Netlifyだと、よしなにデプロイできるよ?　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

③ Github => Netlify

こちらも以下、リンクを参考にわりと簡単に構築できました。
世の中便利ですね本当に。。。。。。

まとめ

とりあえずNetlifyで良いと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧