$ npm run dev
ruedap / daplog Goto Github PK
View Code? Open in Web Editor NEWMy blog
Home Page: https://blog.ruedap.com
My blog
Home Page: https://blog.ruedap.com
$ npm run dev
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | cpx |
|
npm | eslint-config-standard-with-typescript |
|
npm | eslint-loader |
|
npm | eslint-plugin-node |
|
npm | eslint-plugin-standard |
These updates are currently rate-limited. Click on a checkbox below to force their creation now.
@types/react
, eslint-plugin-react-hooks
)reg-keygen-git-hash-plugin
, reg-notify-github-plugin
, reg-publish-s3-plugin
, reg-suit
)@storybook/addon-actions
, @storybook/addon-links
, @storybook/addons
, @storybook/react
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)@types/react
, react
, react-dom
, react-test-renderer
)@storybook/addon-actions
, @storybook/addon-links
, @storybook/addons
, @storybook/react
)@typescript-eslint/eslint-plugin
, @typescript-eslint/parser
)remark
, remark-footnotes
, remark-highlight.js
, remark-html
)These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
styled-components
, @types/styled-components
)@types/jest
, babel-jest
, jest
)package.json
@next/bundle-analyzer 9.5.5
clsx 1.1.1
date-fns 2.23.0
gray-matter 4.0.3
he 1.2.0
lodash 4.17.21
next 10.0.0
normalize.css 8.0.1
polished 3.7.2
react 16.14.0
react-dom 16.14.0
remark 13.0.0
remark-footnotes 2.0.0
remark-highlight.js 6.0.0
remark-html 13.0.2
sass 1.36.0
styled-components 5.1.1
@babel/core 7.11.6
@storybook/addon-actions 6.3.6
@storybook/addon-links 6.3.6
@storybook/addons 6.3.6
@storybook/react 6.3.6
@types/jest 26.0.24
@types/lodash 4.14.171
@types/node 14.10.1
@types/react 16.14.11
@types/react-test-renderer 16.9.5
@types/styled-components 5.1.3
@typescript-eslint/eslint-plugin 4.28.5
@typescript-eslint/parser 4.28.5
babel-jest 26.6.3
babel-loader 8.1.0
babel-plugin-styled-components 1.13.2
chromatic 5.6.1
cpx 1.5.0
cpy-cli 3.1.1
eslint 7.31.0
eslint-config-standard-with-typescript 19.0.1
eslint-loader 4.0.2
eslint-plugin-import 2.23.4
eslint-plugin-node 11.1.0
eslint-plugin-promise 4.3.1
eslint-plugin-react 7.20.6
eslint-plugin-react-hooks 4.2.0
eslint-plugin-standard 4.1.0
http-server 0.12.3
jest 26.6.3
jest-styled-components 7.0.5
make-dir-cli 2.0.0
react-test-renderer 16.14.0
reg-cli 0.17.0
reg-keygen-git-hash-plugin 0.10.16
reg-notify-github-plugin 0.10.16
reg-publish-s3-plugin 0.10.16
reg-suit 0.10.16
storycap 3.0.4
trash-cli 3.1.0
typescript 4.0.2
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
継続的インテグレーションができるようになったのなら、あとは継続的デプロイメントまでやっていただきたいし、大切なのは倍返しじゃなくて繰り返しだねってことで表題の通り。
前にやろうとして調べた時は、HerokuのAPIキーを暗号化して自前でデプロイ用スクリプトを用意して…てな感じでややこしそうだったけど、今はTravis CIで正式に対応していて、コマンド一発で設定できてしまう簡単さで、驚きのあまり出向しそうになった。
The Travis CI Blog: Introducing Continuous Deployment to Heroku
HipChatに通知を送る時にも使ったtravis gemからその設定を行える。
$ travis setup heroku
Deploy only from ruedap/daplog? |yes| yes
Encrypt API key? |yes| yes
travis setup heroku
を実行すると色々質問されるので適当に答えておけば設定が完了する。設定が追加されて更新された.travis.yml
をプッシュするだけでデプロイまで行ってくれるようになる。さらに複雑な設定を行いたい場合は以下のドキュメントに色々と書かれている。
自分の場合は、このブログもHerokuで運用していて、実際に上記の継続的デプロイな方法を使っているんだけど、デフォルトの設定から少し付け足して、以下のように2つのブランチを使って本番環境とステージング環境それぞれに自動でデプロイするように設定している。
上記の方針を設定した.travis.yml
のデプロイ部分は以下のような感じ。
deploy:
provider: heroku
api_key:
secure: (snip)
app:
master: daplog
staging: daplog-staging
on:
rvm: 2.0.0
run:
- rake redis:rebuild
このYAMLファイルの全体はここにあるけど、このように設定することで、ヒューマンによる手動オペレーションは基本的にはリモート(GitHub)にPull Requestを送る部分だけで、あとはTravis CIが自動でテストと、ブランチがstagingならステージング環境へのデプロイもやってくれる。そのステージング環境を目視でひと通りチェックして問題が無ければ、GitHub上のマージボタンをポチッと押してmasterにマージすれば再度テストが走り、無事に通過すればそのまま本番環境へのデプロイまでが自動で行われる。Oh..fantastic!
個人レベルのアプリ開発で、こんなハイテクな環境を無料でしかも超簡単な設定だけで使わせてもらえるとは、うっかり土下座しちゃいそうな嬉しさですね。
そんな感じでとても未来感を味わえるTravis & Herokuの素敵な継続的デプロイ機能なんだけど、まだよく分かってないところがあっていくつかハマり中。
今まで手動で直接Herokuに向けてgit push heroku master
していた時は動いていたのに、Travisからの自動デプロイに切り替えたら動かなくなった部分がチラホラあって、そのほとんどがassets precompile時の環境変数がらみっぽい。
まず、Sentryというアプリのエラーを検知して通知してくれるサービスがあって、Herokuのアドオンにもなっていてこれを利用してて、導入すると環境変数SENTRY_DSN
にURLが入って、initializerでそれを参照して設定するようになっているんだけど、Travis CI上ではこれが空になってることによってデプロイが失敗する模様。
このあたりのTravisのログが該当部分で、じゃあ同じ環境変数をTravis上でも設定してあげればいいのかなと、travis encrypt
コマンドを使って前述の環境変数とその値を暗号化した上で.travis.yml
に設定してみたけど、ここで設定した環境変数はテスト実行時は参照できるけど、デプロイ時はできない(?)みたいで、何度か設定の仕方を変えてやってみたけどうまく受け渡せなくてこの方法では改善できなかった。かといって、他にどうすればいいか思いつかなくて、剣道をしながら考え中。
似たような問題として、precompile時に環境変数RAILS_ENV
を参照して分岐する処理を書いている部分があって、デプロイ時はテスト時と違ってこの値にはproduction
が入っているようで(当たり前か)、前述のように自分はstaging環境にもデプロイしているので、その時はこの環境変数にはstaging
が入ってて欲しくて、どうにかしようとしたんだけど、これもちょっと試行錯誤してみたけど同じようにうまく出来なかったので剣道(ry
今はどちらも、Travisからデプロイするようになってからはうまく動作させれてないので外してあるけど、このあたりの設定や対応方法がわかれば元に戻したいところ。もしこれについて何か知ってる人がいればぜひ情報求む、大和田常務。
うまい話とジェットコースターには乗るなって言ってたばあちゃんの知恵袋だけど、Sassに含まれているsass-convert
コマンドを使うと.sass形式と.scss形式を相互に変換できる。
$ gem i sass
$ sass -v
Sass 3.2.11 (Media Mark)
$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]
(snip)
これを使って、以下は現在のフォルダの.sassを.scssに一括で変換する場合。自分の好みで普段書いているのは.sass形式なんだけど、納品物やチームで使っているのは.scss形式ってことがままあるため、そういう時に使う。
$ sass-convert -F sass -T scss . -R
$ rm *.sass
自分の場合、今開いてるファイルを.sass形式から.scss形式に変換するというのも必要で、その時はVimのコマンドモードからバッファに対して以下のコマンドを実行する。
:%!sass-convert -F sass -T scss
これらのコマンド一発でサクッと変換できちゃうのでとても重宝している。さらに応用で、今書いている.sass/.scssのコードを機械的にカチッと整形したい時にもこれを利用する。オプションのFromとToを同じにしてあげればよい。これでフォーマットされる。ただし、これはあくまで変換の流用で、コード整形のための機能ではないので注意されたし。
:%!sass-convert -F sass -T sass
これはこまめに実行するコマンドなので.vimrc
に書いてすぐ呼び出せるようにしている。末尾に<CR>
を付けてないのは、オプションを手動で変えたい時にも対応するために。
nnoremap <Leader>sass :<C-u>%!sass-convert -F sass -T sass
sass-convert
コマンドの変換は優秀な感じで、これらを使っていて困ったことはあまりないんだけど、例えば以下のような挙動をするので場合によっては使えないかもしれない。
#000000
→ black
#EEEEEE
→ #eeeeee
#9cf
→ #99ccff
'hoge'
→ "hoge"
-(1)
→ -1
1.0
→ 1
.1
→ 0.1
中でも、カラーコード#000000
がカラーネームblack
に変わってしまうのは、自分でも使っていてちょっと微妙だとは感じていて、Sass 3.2以降だとその対象は147種類もあって、例えば#fafad2
はlightgoldenrodyellow
に変換される。わかりづらい使いづらい長い。
なのではじめのうちは、変換前後のdiffを毎回見てどういう挙動をしているのかをチェックしたほうが良さそう。Sassのバージョン間でも違いがあるかもしれない。
ちなみに前述のカラーネームの仕様などは、Sass入門という書籍を読んでいた時に知った。買ったのはSass 3.1の頃だったんだけど、その後にリリースされた3.2に対して1章分の加筆をするなど、電子書籍らしい粋なアップデートをしてくれたので好感度が高い。今度出るSass 3.3の対応まで望むのはちょっと厳しいかもしれないけど、内容はわかりやすかった。
ってばっちゃが言ってた。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.