GAMMD

覚書や日々のこと。不足している知識や非効率な部分を新しい知識で補完/改善していきたい。

herokuにnuxtをデプロイ

モジュールバンドラを勉強するにあたり
まずNode.jsを分かってないと始まらないと思い、Node.js入門にとりかかる
お手軽だなぁ・・・

2、3サイトを回ってるとどこもherokuというPaaSを紹介している
ローカルでも十分だけどNode.jsを使ったサービスのデプロイが
どのような感じか知りたいので登録

devcenter.heroku.com 公式のチュートリアルを見ながら真似っこ。
詰まることなく進む。充実してるなぁ

欲が出てvueを使ってみたくなった
Vue.js をサーバーサイドレンダリングするNuxtにトライ

ja.nuxtjs.org ja.nuxtjs.org 設定を行いデプロイ

$ git push heroku master
fatal: ‘heroku’ does not appear to be a git repository
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

herokuがないよって言われる
.git内のconfigを見ると「remote=origin」になっていた。

[remote "heroku"]
url = https://git.heroku.com/rocky-island-86467.git
fetch = +refs/heads/*:refs/remotes/orgin/*
[branch "master"]
remote = heroku
merge = refs/heads/maste:\Users\mn\Desktop\nodeTest\rocky-island-86467\.git

これを「heroku」に修正してトライ
・・・結果が変わらない

git config -l

gitの設定をみると「remote.heroku.url」、「remote.heroku.fetch」がない。
原因これだ。。。

heroku git:remote -a appName
git push heroku master

設定して再トライ

$ git push heroku master Counting objects: 30, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (25/25), done.
Writing objects: 100% (30/30), 43.70 KiB | 2.91 MiB/s, done.
Total 30 (delta 2), reused 0 (delta 0)
remote: Compressing source files… done.
remote: Building source:
remote:
remote: —–> Node.js app detected
remote:
remote: —–> Creating runtime environment :

成功!

サンプルそのままだけど動くの嬉しい:)
ちょっと前進した気分で今日はおしまい

参考サイト
stackoverflow.com
これを覚えておこう

Follow this steps:
$ heroku login

Create a new Git repository
Initialize a git repository in a new or existing directory
$ cd my-project/
$ git init
$ heroku git:remote -a appname

Deploy your application
Commit your code to the repository and deploy it to Heroku using Git.
$ git add .
$ git commit -am “make it better”
$ git push heroku master

Existing Git repository
For existing repositories, simply add the heroku remote
$ heroku git:remote -a appname

目標

2017年も残すところ4ヶ月と半月・・・・
時間が経つのが早い。早すぎる

何となく頭の中で考えていたけど
明確にしておいたほうが振り返りも楽だと思うので書き記す

年内(2017)にすること

【資格】

  1. 応用情報取得

【コーディング】

  1. javaラムダ式に触れ、自分で書けるようにする
  2. javaのライブラリを使ったweb開発。ライブラリの概要理解、使えるようにする(JsonObjectとかlombokとか。Guavaはどうだろう)
  3. モジュールバンドラーに触れ、何となくでも概要を理解、使えるようにする(webpack、fusebox、axios、vue)
年内にできたらいいな

【資格】

  1. AWS認定取得

【コーディング】

  1. spring-bootとvueを組み合わせたweb開発
  2. AWSに触れ自分で環境を作成する
来年以降やりたいこと

【全般】

  1. 働き方模索

【資格】

  1. AWS認定取得
  2. ネットワークスペシャリスト取得

【コーディング】

  1. jsでライブラリを用いたテスト実装
  2. kotlinを用いたweb開発
  3. Androidアプリ開発

【他】

  1. jenkinsでテスト自動化
  2. dockerも使ってみたい
  3. 機会学習
  4. 自宅で水耕栽培
  5. ブログにインプットしたことをアウトプット(Qitaやgitに記事/ソースコードをあげる)

春に受けた応用情報、手応えがあったのに不合格。
秋こそは受かりたい。
あとはフロントエンド開発やインフラ周りの知識(とりあえずAWS)増強。

目指すはフルスタックエンジニア。
優秀ではないし、時間を要するだろうけど器用貧乏にはこなせる自信がある。

これからの時代、75~80歳まで働かなくちゃいけなくなるはず。
その際に収入口として複数のパイプがあるに越したことはない。
幸い今勤めている会社は副業OKなので模索していこう。

Remove all ads

モダンなフロントエンドの開発についていきたい

元々CやC++がメイン言語のスタンドアローン
サードパーティーアプリを作っておりweb業界歴は1年と半年未満。

最初はjavaガベージコレクションに戸惑い、
javascriptの変数定義で厳密な型定義をしないことに落ち着かず
コードレビューでは「いかにもCっぽい書き方だねぇw」といわれドギマギし
デプロイ後には原因不明のエラーがインフラ側に問題があるのか、問題の切り分けに混乱してた。

頭が固いのと視野が狭かったので
ライブラリなし、ボイラープレートコード満載の自前実装が多い。
最近ようやくライブラリに目を向けたり
作りを見直したり改善へ目を向けられるようになってきた。

そんな中、大きく立ちはだかるのはフロント側の実装。
正直、何がなんだかよくわからんw

今はほとんど一人で担当しているので問題ないと言えばないけど
今時なフロントエンドの開発は出来るようになっておきたい。
目下の目標はwebpackとvueあたりが
使えるようになることだろうか。

インフラの知識も欲しいし、やりたいことが沢山。
目標を語るだけではなく、インプット/アウトプットもしていかないと。


それにしてもその内、バックエンドやフロントエンド等の
垣根はなくなっていくんだろうなぁ。

GallupのStrengthsFinder

友人に勧められて受けたGallupのStrengthsFinder
企業によっては入社時に受けられるそう
www.gallupstrengthscenter.com


TOP5の資質は以下の通り

1 学習欲
2 責任感
3 回復志向
4 分析思考
5 ポジティブ

自分としては8割程度 的中しているかな(*´-`)

今の職業は自分の資質に合っているようだ
#たまに今の職に向いているのか不安になるのは自分だけだろうか

とりあえず現状のスタイルで問題なさそうなので
興味のあることはどんどん取り組んでいこう(`・ω・´)

PowerShellに触れてみる

APIを検証する際、curlをバッチファイルに書いて半自動/半手動で行っている。
これをスマートに行えるようにPowerShellを使う。

使用しているpowershellのバージョンは以下の通り。

Name                           Value
PSVersion                      5.0.10586.117
PSCompatibleVersions           {1.0, 2.0, 3.0, 4.0...}
BuildVersion                   10.0.10586.117
CLRVersion                     4.0.30319.42000
WSManStackVersion              3.0
PSRemotingProtocolVersion      2.3
SerializationVersion           1.1.0.1

Invoke-WebRequestを使用。PowerShell 3.0から使えるとのこと。
invoke-webrequest以外にもHttpWebRequestやWebClientを使う方法があるみたいだけれど省略。

基本的な書き方はこんな感じ。

$uri = "http://example.com"
$method = "POST"
$header = @{"hoge" = "fuga"}
$contentType = "application/json"
$body =  "test"

Invoke-WebRequest -URI $uri -Method $method -Headers $header -ContentType $contentType -Body $body

結果を扱いたい場合はリクエストを変数にとって扱える。便利!

$response = Invoke-WebRequest -URI $uri -Method $method -Headers $header -ContentType $contentType -Body $body

//レスポンスヘッダー取得
$header = $response.Headers

//レスポンスボディー取得
$body = $response.Content

400以上のエラーが出た場合は[System.Net.WebException]が飛んでくるのでcatchしてあげる。
ヘッダやボディー情報をとることも、もちろん出来る。

try {
   $response = Invoke-WebRequest -URI $uri -Method $method -Headers $header -ContentType $contentType -Body $body
      :
    }
}
catch [System.Net.WebException] {
    #write some code
}
catch {
    #write some code
}
finally {
    #write some code
}

本当に便利・・・。
今まで何て非効率なことをやっていたんだろう。

C#に触れるきっかけにツールを作ろうと思っていたけど、当座はこれで十分。
余裕が出来たらツールに挑戦しよう。

okHttpに触れてみる

先日、JJUG CCC 2017 Springへ行った際に
ANDRESさんの講演で紹介されたライブラリの1つokHttp

github.com

これまでHttpURLConnectionで
地道に頑張っていたので、これを機に触ってみる
#2017残り半分のテーマは最近のライブラリに触れることだなぁ…

レシピを見ながら実装してみたところ
ごちゃーと書いていたものが、かなりすっきりする印象

RequestBodyを送らないPOSTで
詰まったけど、こうしたら大丈夫だった

Request request = new Request.Builder()
                             .url("https://hogehoge.com")
                             .header("Accept-Charset", "UTF-8")
                             .addHeader("Content-Type", "application/json; charset=UTF-8")
                             .post(RequestBody.create(null, new byte[0]))
                             .build();

可読性も上がるし、これは使えるようになりたい
あとは講演で紹介されていたRetrofitの組み合わせでできたら素敵
もうちょっと触って慣れたら挑戦してみよう

 -------

okHttpを使わなくともSpringフレームワーク

使用することが殆どなのでRestTemplateで十分そう。

Spring BootとThymeleaf、lombokに触れてみる(2)

昨日は一覧表示部分のみ作成したので
ボタン押下遷移先などを引き続き制作。

ボタンのリンク先設定でつまる。
みんなformのacitionで送ってるけど、
ボタン押下で飛ばしたい場合は表記をどうすれば・・・

いろいろ検索してボタンをaタグで括る方法を見つける。

<a href="" data-th-href="@{/show/__${user.id}__}">
    <button class="btn btn-info" >Query</button>
</a>

いけた・・・!


思うところがあり、最終的にこうしました。

<button class="btn btn-info" th:attr="onclick='location.href=\'/show/__${user.id}__\''">Query</button>

エスケープ処理の多さよ。。。
もっといい書き方あるんだろうけど、今はこれが限界。

Thymeleafのタグの理解がまだまだ浅いなぁ。

Spring BootとThymeleaf、lombokに触れてみる

MkyongさんのMVC解説「Spring MVC form handling example」の
ソースをベースにSpring BootとThymeleaf、lombokに触れてみる。

具体的には以下4つに取り組む。

  1. Spring Boot使用
  2. jspをThymeleafを用いたhtmlへ変換
  3. lombok使用
  4. O/RマッパーにDomaを使用

これまでSpringはMVCを扱っていたので、流行のBootを触ってみたい、
画面もjspを扱っていたので、Thymeleaf使ってみたいという衝動に駆られ。
lombokも扱ったことがないので(ry

Domalombokと相性が悪いと聞いたけれど
公式にサポート概要が出ていたので実践!

一覧だけ作成。
ちゃんと表示できた:)
f:id:gmdmn:20170524144353p:plain:w450

今日の所感:
lombokすごい。
bootも楽ちん。
Thymeleafはまだよく分からない・・・。

ビルド時にwebpack、warに含める

mavenでビルド時にwebpackしてwarに含める方法ないかなぁ・・・と
思っていたら良さげなプラグインを発見。
github.com

<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<!-- Use the latest released version:
https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
<version>1.4</version>
:
:

これでいけるのね、便利。
package.jsonで依存関係のあるモジュールのバージョン差異も起きない(`・ω・´)