急いでイソイテク

並盛り技術ダクダクで。

【H2】メモ

docker-compose H2 DB

【Webpack】入門2 

#########################
# .babelrc
#########################
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react" // JSXのコンパイル用
    ]
}

#########################
# index.js
#########################
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Helloooooooooo, ReeeeaAAAAAccckTTTtttu !!!</div>
    document.getElementById('root')
)

#########################
# webpack.config.js
#########################
const HtmlWebpackPlugin = require('html-webpack-plugin')
：
module.exports = {
    ：
    module: {
        rules: [
            ：
            {
                test: /\.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/
            } ,
            {
                test: /\.html$/,
                loader: "html-loader",
            }
       ]
    },
    ：
    plugins: [
        new HtmlWebpackPlugin({
            // 雛形ファイル名
            template: './src/index.html',
            // 雛形HTMLをベースにして最終的に出力するファイル
            filename: './index.html'
        })
    ]
}

#########################
# src/index.html
# ※dist/index.htmlは自動生成されるものとなり、不要になるので、dis/からsrc/へ移動しておく。
#########################
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
   </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

#########################
# index.js
#########################
import React from 'react'
import ReactDOM from 'react-dom'
import './style.css' // cssのhaikeiクラスをimportするため
import './style.scss' // scssのdivタグのスタイルをimportするため

ReactDOM.render(
    <div>Helloooooooooo, ReeeeaAAAAAccckTTTtttu !!!</div>,
    document.getElementById('root')
)

#########################
# webpack.config.js
#########################
const HtmlWebpackPlugin = require('html-webpack-plugin')
：
module.exports = {
    ：
    module: {
        rules: [
            // 下記理由によりコメントアウトし、scss側と合体する。
            // ・css用の設定とscss用の設定の違いはsass-loaderを適用するかどうかである。
            // ・scssはcssと互換性があり、cssファイルに対してsass-loaderを適用できる。
            // {
            //     test: /\.css$/,
            //     use: [
            //         // 'style-loader', // styleタグに出力するためのもので、mini-css-extractプラグインを使って別ファイルCSSを読み込む場合は不要となるため、不使用。
            //         MiniCssExtractPlugin.loader,
            //         'css-loader'
            //     ]
            // },
            {
                // どういったルールで登録するのか。正規表現で書く
                // test: /\.scss$/,
                test: /\.(sc|c)ss$/, // cssも適用できるようにする。
                // 何を登録し適用させるのか
                // 下記に書くものは順序に注意が必要である。
                // 並び順とは逆順に評価・実行される。
                // つまり下記は、sass-loader、css-loader、mini-css-extractプラグインloaderの順序で実行される。
                use: [
                    // 'style-loader', // styleタグに出力するためのもので、mini-css-extractプラグインを使って別ファイルCSSを読み込む場合は不要となるため、不使用。
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
          ：
       ]
    },
    ：
    plugins: [
        ：
        new MiniCssExtractPlugin({
            // HTMLとは別最終的に出力するファイル
            // ※importしたスタイルシートをこれにバンドルして放り込む
            // ※[name]はデフォで'main'となる。
            // ※[hash]はバンドル時にユニークな番号を生成して、ユニークなファイル名を付ける。
            //   ※Proxyサーバのキャッシュを回避するためにユニークにする、というテク。
            filename: '[name].[hash].css'
        })
    ]
}

#########################
# src/index.html
#########################
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
   </head>
    <body class="haikei">  ★ここ変えた★
        <div id="root"></div>
    </body>
</html>

#########################
# webpack.config.js
#########################
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
：
module.exports = {
    ：
    optimization: { // optimization：Webpack4から導入された。
        minimizer: [
            new UglifyJsPlugin({
                // console.log除去以外のオプションは下記参照
                // https://github.com/mishoo/UglifyJS2#compress-options
                uglifyOptions: {
                    compress: {
                        drop_console: true
                    }
                }
            })
        ],
    },
}

#########################
# webpack.config.js
#########################
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
：
module.exports = {
    ：
    optimization: { // optimization：Webpack4から導入された。
        minimizer: [
           ：
            new OptimizeCSSAssetsPlugin({})
        ],
    },
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    // 他の選択肢は下記から
    // https://webpack.js.org/configuration/devtool/#devtool
    devtool: 'eval-source-map'
}

【Webpack】入門1

webpack 
// 現時点のindex.html
<!DOCTYPE html>
<html lang="ja">
    <head>
       <meta charset="utf-8">
       <title>Hi, Webpaaaaacckkkkkk!!!</title>
       <script src="https://unpkg.com/lodash@4.17.11/lodash.min.js"></script>
   </head>
    <body>
        <b>Hi!!!! Webpaaaaaaaackkkkk!!!</b>
        <script src="src/index.js"></script>
    </body>
</html>

.現時点のindex.js

function component(){
    const element = document.createElement('div');
    const array = ['Helloooooo', 'WebPAAAAACKKKKK'];
    element.innerHTML = _.join(array, ' ')
    return element;
}

document.body.appendChild(component());

#########################
# webpack.config.js
#########################
const path = require('path')

const outputPath = path.resolve(__dirname, 'build/static')
console.log("outputPath: " + {outputPath})

module.exports = {
    // webpackのエントリポイント
    entry: './src/index.js',

    // 出力方式（場所・内容）を決める
    output: {
        // どこに出すのか
        path: outputPath,
        // 名前を何にするのか
        filename: 'out.js'
    }
}

#########################
# webpack.config.js
#########################
:
const outputPath = path.resolve(__dirname, 'dist')

module.exports = {
    :
    devServer: {
        contentBase: outputPath
    }
}

{
  "name": "dive-into-react-with-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npx webpack-dev-server --open"  ★この行★
    // "start": "npx webpack-dev-server --open --mode development"  ★WARNING抑止するならこっち★
  },
  ：

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            {
                // どういったルールで登録するのか。正規表現で書く
                test: /\.css$/,
                // 何を登録し適用させるのか
                // 下記に書くものは順序に注意が必要である。
                // 並び順とは★逆順に★評価・実行される。
                // つまり下記は、css-loader、style-loaderの順序で実行される。
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    ：
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            ：
            {
                // BASE64URLエンコードする条件と対象
                test: /\.(jpe?g|png|gif|svg|ico)$/i, // 'i'は大文字小文字無視
                loader: 'url-loader',
                options: {
                    // 2KBを超えるサイズの画像がname.extで置き換えられる。
                    // 分離された${name.ext}は、並行してDLされるようになり、早くなる。
                    limit: 2048, // 単位=Bytes
                    name: './images/[name].[ext]'
                }
            }
        ]
    },
    ：
}

#########################
# webpack.config.js
#########################

module.exports = {
    ：
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            ：
        ]
    },
    ：
}

#########################
# style.scss
#########################
$primary-color: #FF5733;

div {
    color: $primary-color;
}

【Intelli J】Java開発（記事成長中）

IntelliJ

f:id:isoittech:20200327165608p:plain
設定変更作業

// ============================================================================ // ============================================================================

EC2インスタンス間でNFS

Gitあれこれ（記事成長中）

Git

Ansible

インストール

yum install -y epel-release
yum install -y ansible –enablerepo=epel-testing

Ansibleお作法

・対象のサーバーへの重大な影響回避のため、実行許可するIPアドレスをhostsリストに記載して限定する。hostsリストは、デフォルトでは「/etc/ansible/hosts」となるが、-iオプションを用いて一時的に別のファイルを指定することも可能。
cat /etc/ansible/hosts
・Ansibleが対象となるサーバーを操作するためにはhostsの設定に加えて、認証が必要となる。認証には、秘密鍵の作成と登録による方法や、簡単な方法として-kオプションで操作対象サーバーのSSHパスワードを入力し実行するといった方法がある。

接続状況と設定を確認する

ansible 192.xxx.xxx.xxx -m yyyy
(format) ansible <IPADDR> -m <MODULE>
(ex.) ansible 192.168.xxx.xxx -y ping

実行

-kオプションを用いたansibleコマンドの実行

$ ansible localhost -m ping -k

ssh-copy-idを用いたansibleコマンドの実行

$ ssh-keygen
Enter passphrase (empty for no passphrase): <入力>
Enter same passphrase again: <再入力>
$ ssh-copy-id localhost
isomurat@localhost’s password: <再入力>

お試し

$ ansible localhost -m ping

Playbook

ファイルフォーマット

cat yum.yml

- hosts: <対象ホスト>
  tasks:
    - name: <Playbook名>
      yum: name=<yumによるインストール対象パッケージ> #