2017年7月30日日曜日

【Docker】UnicodeEncodeError: 'ascii' codec can't encode characters in position. Dockerのターミナルで日本語を使う

  • 公開日:2017年07月30日

記事概要

機械学習の環境をdockerで生成して、ターミナルに日本語を出力処理するとエラーが発生します。
この記事はdockerで日本語を出力する方法を記載した記事です。

環境

  • Docker version 17.06.0-ce
  • ubuntu 16.04.2 LTS
  • Python 3.6.1 :: Anaconda custom (64-bit)

ターミナル

dockerのubuntu環境だと、デフォルトでターミネルの日本語の出力ができません。
MeCabなどを使ってprintで文字を出力しようとすると、
'ascii' codec can't encode characters in position
が発生します。

これだと使いにくいので、dockerのターミネルで日本語を利用できるようにします。

locale変更

localeを日本語に変更します。

terminal

locale

LANG=
LANGUAGE=
LC_CTYPE="POSIX"
LC_NUMERIC="POSIX"
LC_TIME="POSIX"
LC_COLLATE="POSIX"
LC_MONETARY="POSIX"
LC_MESSAGES="POSIX"
LC_PAPER="POSIX"
LC_NAME="POSIX"
LC_ADDRESS="POSIX"
LC_TELEPHONE="POSIX"
LC_MEASUREMENT="POSIX"
LC_IDENTIFICATION="POSIX"
LC_ALL=

dockerのデフォルトは、POSIXです。なので、日本語にします。

terminal

export LC_ALL=ja_JP.UTF-8

変更を確認します。

terminal

locale
LANG=
LANGUAGE=
LC_CTYPE="ja_JP.UTF-8"
LC_NUMERIC="ja_JP.UTF-8"
LC_TIME="ja_JP.UTF-8"
LC_COLLATE="ja_JP.UTF-8"
LC_MONETARY="ja_JP.UTF-8"
LC_MESSAGES="ja_JP.UTF-8"
LC_PAPER="ja_JP.UTF-8"
LC_NAME="ja_JP.UTF-8"
LC_ADDRESS="ja_JP.UTF-8"
LC_TELEPHONE="ja_JP.UTF-8"
LC_MEASUREMENT="ja_JP.UTF-8"
LC_IDENTIFICATION="ja_JP.UTF-8"
LC_ALL=ja_JP.UTF-8


これで完了です。pythonのMecabを実行して確認します。

terminal

python tolenize_ja.py
第 9 9 回 全国 高校 野球 選手権 埼玉 大会 は 、 花咲 徳 栄 が 3 年 連続 5 回 目 の 優勝 を 果たし 、 県内 1 5 6 チーム ( 1 6 1 校 ) の 頂点 に 立っ た 。 

正常に日本語が出力されました、

まとめ

機械学習の環境にDockerを使うのは、とても良い選択です。Dockerの学習は慣れるまで大変ですが、使えば使うほど生産性も向上するので、ぜひ利用してください。

PICK UP オススメ本

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2017年7月9日日曜日

【Rails5.1.2】 Rails5.1.0からRails5.1.2にアップグレードする。

  • 公開日:2017年07月09日

記事概要

気づいたらRails5.1.2がリリースされたのでアップグレードしました。まとめ記事です。

環境

  • centos6.5
  • Rails5.1.0 → Rails5.1.2
  • ruby2.3.0
  • rbenv
  • unicorn
  • whenever

移行用の作業branchの作成

gitでrails5.1.2移行用の作業ブランチを作成します。

terminal

cd {project_folder}
git branch feature/rails5.1.2

checkoutでブランチを切り替えます。

terminal

git checkout feature/rails5.1.2

準備完了です。

Gemfile修正

まずGemfileを修正します。

{project_folder}/Gemfile

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.1.0'

↓

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.1.2'

gem 'rails', '5.1.2'に修正し、updateします。

terminal

// update
bundle update 

bundle updateは、全ての依存関係をインストール・ダウンロードし直すことができます。

Bundle updated!が表示されれば成功です。5.1.0に対応してあれば、bundle updateはひっかからないはずです。

Upgrade 設定ファイル

Gemファイルの導入が完了したら、rails app:updateで設定ファイルを更新します。

terminal

bundle exec rails app:update

ファイル更新の有無を聞かれるので、更新が必要なファイルのみ変更します。
私の環境では以下のようにしました。

  • config/routes.rb → 更新しない
  • config/application.rb → 更新しない
  • config/secrets.yml → 更新しない
  • config/cable.yml → 更新する
  • config/puma.rb → 更新する
  • config/environments/development.rb → 更新しない
  • config/environments/production.rb → 更新しない
  • config/environments/test.rb → 更新しない
  • config/initializers/assets.rb → 更新しない
  • config/initializers/new_framework_defaults.rb → 更新しない
  • bin/setup → 更新する
  • bin/update → 更新する

更新後は、git diffでファイルを比較して必要な設定だけ元に戻します。
5.1.2は5.1.0とほとんど差異がありません。更新の目的はセキュリティアップデートとなります。

Rails5.1.2起動

アプリを起動します。

terminal

rbenv exec bundle exec rails s -b 0.0.0.0
=> Booting WEBrick
=> Rails 5.1.2 application starting in development on http://0.0.0.0:3000
=> Run `rails server -h` for more startup options
[2017-07-09 02:44:22] INFO  WEBrick 1.3.1
[2017-07-09 02:44:22] INFO  ruby 2.3.0 (2015-12-25) [x86_64-linux]
[2017-07-09 02:44:22] INFO  WEBrick::HTTPServer#start: pid=23651 port=3000

コンソールにRails 5.1.2 applicationが表示され、画面が表示されれば成功です。

だいたいここまでで10分くらいです。あとは、テストコードを実行してデグレを確認します。

terminal

bundle exec rspec

Finished in 2 minutes 4.6 seconds (files took 7.11 seconds to load)
237 examples, 0 failures, 15 pending

問題ありませんでした。DEPRECATION WARNINGも発生せず。

リリース

capistrano3を使っていつも通りリリースすればOKです。少し時間がかかります。一通りの動作確認はしておきましょう。

まとめ

Rails5.1.0からRails5.1.2のアップデートは、20分もあれば完了します。
さっさと更新しておきましょう。

以上です。

PICK UP オススメ書籍

運営サイト(railsで作成しています)


この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加

2017年7月8日土曜日

【Docker】DockerでWEBフロント開発の環境を構築

  • 公開日:2017年07月08日

記事概要

今はjavascriptやcssの開発でもコンパイル環境が必要になってきました。

この記事は、Dockerでフロント開発の環境を構築する方法を記載しました。webpackとbabel(とreactやvueやbackborn)を使って開発することを前提に構築します。
汎用性は求めていないので、dockerファイルは使いません。あくまでメインマシンを汚さないために、dockerで開発環境を用意します。

環境

  • macOS Sierra
  • docker 17.06.0-ce
  • Ubuntu 16.04.2 LTS
  • nvm 0.33.2
  • node v8.1.3
  • webpack 3.1.0

前提

  • dockerをインストール済み
  • webpackやbabelなどのライブラリの多少の知識がある

工数

blogを書きながらでも2時間くらいで構築できました。
私はAndroidとRailsアプリをメインで開発しているのでフロントは専門ではありませんが、慣れている人ならあっという間に終わると思います。

dockerコンテナ起動

利用するdockerイメージを確認します。

terminal(mac)

// フォルダ移動
cd /Users/dameotoko/workspace/docker

// dockerイメージの確認
docker images

ubuntu                    latest              d355ed3537e9        2 weeks ago         119MB

ubuntuのイメージを使います。
ttyでdockerを起動します。

terminal(mac)

// ttyで起動
docker run -v /Users/dameotoko/workspace/docker/react:/var/www -i -t ubuntu /bin/bash

オプション -v はVOLUME命令です。

Dockerコンテナ内の指定したパスをマウントできるように命令します。

ここではmacの/Users/dameotoko/workspace/docker/reactフォルダ配下と、dockerコンテナの/var/www配下を共有して開発するように指定しています。

共有できているか試してみます。

terminal(mac)

// mac
cd /Users/dameotoko/workspace/docker/react
touch index.html

// docker
cd cd var/www
ls -l
total 0
-rw-r--r-- 1 root root 0 Jul  8 06:07 index.html

macとdockerコンテナでファイルが連携されました。

nvmインストール

最新のnode.jsを使えるように、nvmをインストールします。
nvmは、rubyのrbenvとか、pythonのcondaと同じバージョン管理ツールです。 まずはsudoを利用可能にします。

terminal(docker)

apt-get update
apt-get install -y sudo

ソースパッケージをビルドするために必要なパッケージを事前にインストールします。

terminal(docker)

sudo apt-get install build-essential libssl-dev

curlをインストールします。

terminal(docker)

sudo apt-get install curl

nvmをインストールします。

terminal(docker)

// https://github.com/creationix/nvm
// DL
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

// shellを反映
source ~/.bashrc

nvm --version
0.33.2

nvmが正常にインストールされました。

nodeインストール

nodeをインストールします。

terminal(docker)

// 利用可能なバージョン確認
nvm ls-remote

v8.1.3

// install
nvm install 8.1.3

~/.nvm ディレクトリ配下に、指定したバージョンのnode.jsがインストールされます。

terminal(docker)

ls -l ~/.nvm/versions/node/
total 4
drwxr-xr-x 7 root root 4096 Jul  8 06:45 v8.1.3

デフォルトに設定されていることを確認します。

terminal(docker)

nvm ls
->       v8.1.3
default -> 8.1.3 (-> v8.1.3)
node -> stable (-> v8.1.3) (default)
stable -> 8.1 (-> v8.1.3) (default)


node -v
v8.1.3

npm -v
5.0.3

準備完了です。

プロジェクトHello world作成

サンプルとしてjsプロジェクを作成します。

terminal(docker)

// プロジェクトフォルダ
cd /var/www 

npm init -y

npm install --save-dev webpack babel-loader babel-core babel-preset-env babel-preset-react babel-preset-es2015

プロジェクトが作成されます。バージョン指定していないのでwebpackは3.1.0がインストールされました。
webpack.config.jsは自動作成されないので、生成します。

terminal(docker)

// 生成
touch webpack.config.js

設定を記載します。

root/webpack.config.js

module.exports = {
    // エントリポイント(最初に読まれるjs)
    entry: "./entry.js",
    // バンドルされたjsファイル(成果物)
    output: {
        // 出力先のパスを指定
        path: __dirname,
        // ビルド後のファイル名を指定
        filename: "bundle.js"
    },
    module: {
      loaders: [
        { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: "babel-loader", 
          query:{
            presets: ['react', 'es2015']
          }
        }
      ]
    }
};


webpack3だとloader: "babel-loader"になっているので注意してください。具体的な設定はここが参考になります。

簡単なHello worldアプリを作成します。
まずはエントリーポイントを作成します。

terminal(docker)

// 生成
touch entry.js

entry.jsを作成します。

続けてindex.htmlを作成します。

terminal(docker)

// 生成
touch index.html

htmlタグを記載します。

root/index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>webpack tutorial</title>
    </head>
    <body>
        <div id="myapp"></div>
        <script src="bundle.js"></script>
    </body>
</html>

ビルドします。

terminal(docker)

npm run build

> www@1.0.0 build /var/www
> webpack

Hash: cc0f9a75acd498c84298
Version: webpack 3.1.0
Time: 2287ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.51 kB       0  [emitted]  main
   [0] ./entry.js 13 bytes {0} [built]

babelを使ってMessageクラスを作成します。

terminal(docker)

// 生成
touch message.js

コードを記載します。

message.js

class Message {
    constructor(msg) {
        this.msg = msg;
    }
}
export default Message;

エントリーポイントで利用します。

entry.js

import Message from './message';

var message = new Message('Hello world');
console.log(message);

htmlをブラウザで開いてコンソールログを確認します。

console

Message {msg: "Hello world"}
msg
:
"Hello world"
__proto__
:
Object

うまくいきました。あとはアプリの開発をするだけです。

まとめ

webpackやbabelを使った開発ができるフロントエンジニアはまだ少ないみたいです。フロントができるといいながら、jqueryしかできない人を未だによく見かけます。時代をちゃんと追いかけましょう。

今後は他の言語と同じように開発環境の構築が求められていくはずです。複雑そうに見えますが、実際に触ってみるとそれほど難しくないので、定期的にキャッチアップしていくといいと思います。
今から学習するなら、TypeScriptとReactの組み合わせが、一番良い選択だと思います。

また、開発環境はdockerじゃなくてvagrantでも良いと思います。ただ、dockerの方が簡単だと(個人的に)思います。

また、サーバーエンジニアやスマホのネイティブエンジニアもフロントを触ってみてください。色々と知識を応用できるようになってきているので、定期的に簡単なアプリを作ると良いと思います。

以上です。

PICK UP オススメ書籍

運営サイト(railsで作成しています)


参考記事

この記事がお役にたちましたらシェアをお願いします

このエントリーをはてなブックマークに追加
Related Posts Plugin for WordPress, Blogger...