Subscribed unsubscribe Subscribe Subscribe

AngularJSをgulpで開発する

gulpのインストール

$ npm install -g gulp

※yo(yeoman),bower,npmはインストールされている前提です

generator-gulp-angularをインストール

npm install -g generator-gulp-angular

プロジェクトの雛形の作成

$ yo gulp-angular {{プロジェクト名}}
$ cd {{プロジェクト名}}

※選択肢については以下を参照してください。
https://github.com/Swiip/generator-gulp-angular

gulp起動

$ gulp serve

f:id:keiwt:20150214180159p:plain

※起動させた感じだとgruntより起動が速い印象です。

リリースディレクトリ作成

$ gulp build

※これでできたdistディレクトリをデプロイすれば本番リリースは完了します。

本番リリース

  • ドキュメントルートの確認
$ less /etc/nginx/conf.d/default.conf
↓
location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
}
  • 配置
$ ssh {{EC2インスタンスのHost}}
$ sudo yum install git
$ cd /usr/share/nginx/
$ sudo rm -rf html
$ sudo git clone https://github.com/{{ユーザー名}}/{{プロジェクト名}}-dist.git html

※EC2インスタンスのHostは~/.ssh/configに記載してください

Host {{EC2インスタンスのHost}}
  HostName 52.X.XXX.XXX
  User centos
  IdentityFile ~/.ssh/XXXXXX.pem

※CentOS7を使用しているのでUserはcentosです。通常はec2-userだと思いますが。 直接EC2インスタンスssh接続するのは古いやり方ですが、
今回はRoute53,ロードバランサ,EC2インスタンス等の設定・生成をAWS Deployment & Managementを使用して行わなかったのでこのようにしています。
通常はAWS Code Deployもしくは以下のコマンドでデプロイします。

$ git aws.push