SiG Staff Blog

福井と金沢にあるSIGという会社で流行らそうとしたノウハウ集。主に流行らないが・・・。

Linux(EC2)にUpsourceをインストールしてみた

EC2にUpsourceをインストール

しました。

# アプリのダウンロード
wget https://download.jetbrains.com/upsource/upsource-2017.3.2888.zip
unzip upsource-2017.3.2888.zip
rm upsource-2017.3.2888.zip
cd upsource-2017.3.2888/bin

# 8080ポートを使いたくないので、変更
sh upsource.sh configure --listen-port 11111

# 起動
sh upsource.sh start

特に何も問題なく簡単にインストール&起動ができました。 流石、JetBrains。

唯一の注意点

t2.micro(無料枠のEC2インスタンス)だと、メモリが足りなくてインストールはできるけど起動しませんでした。
t2.mediumぐらいは必要だと思います。

backlogのwikiを自動で作成するツールを作った

プロジェクトが立ち上がるたびに、同じ事をしていた

それはきっと無駄な時間だ。

と思って、そういえば、backlogはAPIがあるから定型文作ったら、
ボタンぽちればwikiを自動で作れるんじゃない?とふと思ったので、作ってみた。

作ってみて

いま、勝手に進めているプロジェクトで使用してるVue.jsを使って作ってみたんだけど、
こういうの作るのにはすごい向いてるね。
楽に作れましたよ。
サーバーとの通信にはAxiosを使ったんだけど、これもあんまり細かいこと考えなくても使えてとても便利。

sourceはGitHubに上げたのでcloneなどして使ってください。
webpackを使ってローカルサーバーを立ち上げれるので、ローカルからでも使えるし、
サーバーに挙げてもらっても使えます。
使い方はREAD MEを見てください

github.com

画面イメージ

最初の状態

f:id:Bee_Flim:20180507153228p:plain

ツールの画面

f:id:Bee_Flim:20180507153234p:plain

追加した時の状態

f:id:Bee_Flim:20180507153239p:plain

symphony4のDoctrin使うとエラーメッセージが文字化けしてる

doctrineコマンドを実行するとエラーになっちゃう。

しかも文字化けしてる。。。

ターミナルもDBの文字コードutf-8にしてるのになんでやろ。。。

解決

php bin/console doctrine:database:create

とかを実行すると、 エラーになってエラーメッセージが文字化けすることがある。

config/package/doctrine.yml

の charset utf-8mb4になっているからUTF-8にする。

RDSを作るとデフォルトの文字コードがlaten-1になってしまう

ポチポチとRDSを作るとデフォルトの文字コードがlaten-1になってしまう問題

ポチポチとOKOKでRDSを作成すると文字コードがlaten-1になってしまって、困るという話。

原因

そもそも、パラメータグループで設定をしないといけなかった。

対処

パラメータグループを作成する

左のメニューからパラメータグループを選ぶ。

f:id:Bee_Flim:20180328141730p:plain

適当に入力していく。

f:id:Bee_Flim:20180328141736p:plain

パラメータの絞り込みができるので、 character で絞り込む。

f:id:Bee_Flim:20180328141739p:plain

とりあえず、絞り込みがされたものを選択をする。

UTF-8と1 を設定する。

f:id:Bee_Flim:20180328141743p:plain

RDSの作成

いつものように作成する。

f:id:Bee_Flim:20180328141719p:plain

適当に入れる。

f:id:Bee_Flim:20180328141723p:plain

パラメータグループに先ほど作成したものが出てくるので、それを選ぶ。 出てこなかったときは、パラメータグループ作るときに指定したバージョンを確認する。

f:id:Bee_Flim:20180328141727p:plain

もうインスタンスとかテーブルとか作っちゃってたら

インスタンス作たけど、テーブルは作ってないとき

インスタンスの画面がから変更ができます。

テーブル作っちゃったとき

DBの文字コード変換機能を使えばOK。

EC2に作ったNginxにLet's Encryptを導入する

オレオレ証明からLet's Encriptに変更する

前提

yakisaba.hatenablog.jp の通りにサーバーが立っている事。

注意

EC2のパブリックDNSだと登録できないそう。
適当にドメインを取ってみて試してみる

ドメインを取得して、Route53にAレコードを追加する

  1. お名前.comとかでDNSを取得する。
  2. EC2のダッシュボードを開き、左側にあるElastic IPを選択する。
  3. 新しいIPの割り当てを選択して、IPを取得する。
  4. 作成したものを右クリックして、アドレスの割り当てを選択して、EC2インスタンスに割り当てる。
  5. 作成されたIPアドレスをメモしておく。
  6. Route53を開き、Hosted Zoneを開く。
  7. create hosted zoneを選択して、Domain Nameに作成したドメインをいれて、作成をする。
  8. 作成したゾーンを選択してgo to recordを選ぶ。
  9. create recordを選択して、下のように設定して作成する。
  10. NSレコードの内容をコピーして、取得したドメインのネームサーバーに設定する。
  11. nslookup www.ドメインIPアドレスと紐づいているかチェックする。

必要なツールをインストール

# gitのインストール
$ sudo yum install git

# Let's Encryptのツールをインストール
$ git clone https://github.com/certbot/certbot ~/certbot
$ cd ~/certbot

証明書の発行

# ドメイン名、メアドは取得したものを使う
$ sudo ./certbot-auto certonly --webroot -w ドキュメントルート -d 取得したドメイン名 -m 自身のメールアドレス  --debug

証明書が出来上がるので、それを /etc/nginx/conf.d/default.conf に登録する。

/etc/nginx/conf.d/default.conf

  ssl_certificate /etc/letsencrypt/live/ドメイン名/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/ドメイン名/privkey.pem;

確認

nginxを再起動して接続してみて、https + http2で繋がっていればOK

継続的に取得するようにする

# 毎月1日の1時に強制的に更新する。
0 1 1 * * root /nome/ec2-user/certbot/certbot-auto renew --force-renewal && service nginx restart

EC2にNginxサーバーを立てて、PHPが動くようにしてから、オレオレ証明書でhttps化をする

EC2にNginxサーバーを立てて、PHPが動くようにしてから、オレオレ証明書https化をする

なんでオレオレ証明書

Let's Encryptを試す前に、オレオレ証明書でサーバーを立ててみてからやろうと思ったから。

前提

  • EC2サーバーを立てれる。
  • linuxの事をなんとなく知っている。

早速開始

phpが動くようにする

EC2にphpとNginxをインストール

$ sudo yum install php71 php71-devel php71-fpm php71-mysql php71-mysqlnd php71-mbstring php71-pdo php71-zip
$ sudo yum install nginx

設定ファイルを変更

/etc/php-fpm.d/www.conf

# 下のように変更する
user = nginx
group = nginx
listen.user = nginx
listen.group = nginx

/etc/nginx/conf.d/default.conf

DocumentRootは/home/ec2-user/www/publicにしました。

server {
   listen       80;
   server_name  EC2のパブリックドメイン;
   root         /home/ec2-user/www/public;
    location / {
        root   /home/ec2-user/www;
        index  index.html index.htm index.php;
    }

    location ~ \.php$ {
        root           /home/ec2-user/www/public;
        fastcgi_pass   unix:/var/run/php-fpm/www.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }

}

誰でも見れるようにパーミッションの変更

$ sudo chmod 755 /home/ec2-user/

確認

いつものphpinfoの出力をするindex.phpを作って、
/home/ec2-user/wwwにindex.phpを置いて動作させてみる。

$ sudo service nginx start

ログの場所

何かエラーが出たらログを確認してみましょう。

$ sudo tail -f /var/log/nginx/error.log

403が出た時はパーミッションエラーの可能性があるので、www下のファイルの権限をチェック。

503の時は/etc/php-fpm.d/www.confのlistenと/etc/nginx/conf.d/default.confのfastcgi_passの内容が違うからかもしれないです。同じものにしないといけないとのこと。

/etc/php-fpm.d/www.confのlisten

; The address on which to accept FastCGI requests.
; Valid syntaxes are:
;   'ip.add.re.ss:port'    - to listen on a TCP socket to a specific IPv4 address on
;                            a specific port;
;   '[ip:6:addr:ess]:port' - to listen on a TCP socket to a specific IPv6 address on
;                            a specific port;
;   'port'                 - to listen on a TCP socket to all addresses
;                            (IPv6 and IPv4-mapped) on a specific port;
;   '/path/to/unix/socket' - to listen on a unix socket.
; Note: This value is mandatory.
listen = /var/run/php-fpm/www.sock   <-- これ[f:id:Bee_Flim:20180322192006p:plain]

/etc/nginx/conf.d/default.confのfastcgi_pass

   location ~ \.php$ {
       root           /home/ec2-user/www/public;
       fastcgi_pass   unix:/var/run/php-fpm/www.sock;  <-- これ
       fastcgi_index  index.php;
       fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
       include        fastcgi_params;
   }

SSL and Http2の設定をする

sshキーの作成をする

sudo mkdir /etc/nginx/ssl
cd /etc/nginx/ssl
sudo openssl req -new -x509 -sha256 -newkey rsa:2048 -days 365 -nodes -out /etc/nginx/ssl/nginx.pem -keyout /etc/nginx/ssl/nginx.key

nginxの設定を更新

/etc/nginx/conf.d/default.conf

# 80 portで接続に来た場合、httpsへ転送する
server {
    listen       80;
    server_name  EC2のパブリックサーバー名;
    return 301 https://$host$request_uri;
}

server {
   # sslとhttp2を追記
   listen       443 ssl http2;
   server_name  EC2のパブリックサーバー名;
   root         /home/ec2-user/www;

   # ssl keyを追加する
   ssl_certificate /etc/nginx/ssl/nginx.pem;
   ssl_certificate_key /etc/nginx/ssl/nginx.key;

   # 前方秘匿性の確立
   ssl_ciphers  ECDHE+AESGCM:DHE+AESGCM:HIGH:!aNULL:!MD5;

   # キャッシュ等の設定
   ssl_session_timeout 5m;
   ssl_prefer_server_ciphers on;

   # httpAccessがあっても強制でhttpsにする
   add_header Strict-Transport-Security "max-age=15768000; includeSubdomains";

   location / {
       root   /home/ec2-user/www;
       index  index.html index.htm index.php;
   }

   location ~ \.php$ {
       root           /home/ec2-user/www;
       fastcgi_pass   unix:/var/run/php-fpm/www.sock;
       fastcgi_index  index.php;
       fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
       include        fastcgi_params;
   }

}

確認

chromeのエクステンションHTTP/2 and SPDY indicatorを入れて確認する。

chrome.google.com

f:id:Bee_Flim:20180322192006p:plain

TypeScriptとSASSを使うVue.jsの開発環境を作成する。

TypeScriptとSASSを使うVue.jsの開発環境を作成する。

前提

  • nodeがインストール済みである。
  • npmコマンドをなんとなく知っている。
  • なんとなく、vue.jsを知ってる。(https://www.youtube.com/watch?v=mZY1yyrlJWUのシリーズを見ておくといいかも)

早速やる

ライブラリのインストール

sassはタグに設定するだけで使えるようになるので、TypeScriptだけインストールする。

# とりあえず、 vue-cliをインストールする
$ npm i -g vue-cli

# webpackペースのプロジェクトを作成する
$ vue init webpack frontend_src

# typescriptで必要なものをプロジェクトにインストール
$ cd frontend_src
$ npm install
$ npm i -D typescript ts-loader vue-class-component

typescriptの設定

tsconfig.jsonファイルをfrontend_srcに作成して、下のように設定する。

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "target": "es6",
    "lib": ["dom", "es6", "es2015.promise"]
  },
  "include": [
    "./src/**/*.ts"
  ]
}

build/webpack.base.conf.jsを書き換える。

module.exports = {
    entry: {
      // エントリポイントの拡張子を.js→.tsに変更
      app: './src/main.ts'
    },
    output: {
      path: config.build.assetsRoot

// ----- 略 -----

    },
    resolve: {
      // extensionsに'.ts'を追加
      extensions: ['.js', '.vue', '.json', '.ts'],
      // ----- 略 -----
    }

      // test: /\.js$/,の下あたりに追加する
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        include: [resolve('src'), resolve('test')],
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },

// ----- 略 -----
}

jsファイルをtsファイルにする。

  • ./src/main.js を ./src/main.ts
  • ./src/router/index.js を ./src/router/index.ts に変更する。

Vueファイルで使用言語を指定する。

  • src/App.vueとsrc/components/HelloWorld.vueのscriptタグにlang="ts"を追加する。

App.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'app'
})
export default class App extends Vue {
}
</script>

HelloWorld.vue

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  name: 'HelloWorld'
})

export default class Hello extends Vue {
  msg = 'Welcome to Your Vue.js App'
}
</script>

<style scoped lang="scss">
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;

  .test {
    font-size: 80px;
  }
}
a {
  color: #42b983;
}
</style>

build結果をAPサーバーのディレクトリにしたかったので、設定する

config/index.js

  build: {
    // これを書き換える
    index: path.resolve(__dirname, '../../public/index.html'),

    // これも書き換える
    assetsRoot: path.resolve(__dirname, '../../public'),

// 略

  }

build出来るか試してみる

# サーバーが自動で立ち上がって画面が表示される。
$ npm run build

起動させてみる

# サーバーが自動で立ち上がって画面が表示される。
$ npm run dev

loaderでエラーになる場合

vue-cliでテンプレートを作成すると、webpack3.x系がインストールされるが、
ts-loaderは自前でインストールしているので4.x系がインストールされます。(2018/3)

ts-loader4.x系はwebpack4.x系で使ってね。webpack3.xで使いたいならts-loaderも3.x系を使ってとREADMEに書いてあるので、
package.jsonを編集して3.x系がインストールされるようにすると、コンパイルが通ります。

やってみて

コンパイルエラーが出てしまったところに詰まったけど、それ以外は結構すんなりできました。

RESTサーバーを作って、fetch apiを使ってデータ通信をしよう。 RESTじゃなくて、GraphQLがいいって話も聞くけど、とりあえずRESTだ。