mimikunの技術メモ

mimikunがプログラミング中調べてわかったことをまとめていくブログです

Hugo + Netlify + GitHub でブログを構築する

mimikun blogGitHub PagesからNetlifyに移しました。

手順

まずNetlifyのアカウントを作成します。

Netlify Appにアクセスし、GitHub認証でアカウントを作成します。

New Site from Git をクリックします。

Continuous Deployment で、GitHubをクリックし、認証します。

するとリポジトリが出てきますので、Hugoサイトのリポジトリを選択します。

image1

するとこのようなものが出てくるので、このように入力します。

デプロイするブランチ, ビルドコマンド, 公開ディレクトリをそれぞれ入力します。

僕はこれでうまく行かなかったので、管理画面からBuild environment variablesを設定しました。

image2

すると、ビルドがうまく通りました。

あとは管理画面からURLをconfig.tomlのbase urlと同じものに変えます。

参考にしたサイト

Host on Netlify | Hugo

[SOLVED] Netlify deployment errors, yet, nothing errors on localhost - support - Hugo Discussion

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する – Snaplog

npm install のオプションについて

全然わからないので調べた。

ドキュメントの説明(NPMの場合)

npm installは、指定されたパッケージをデフォルトで依存関係に保存します。 さらに、いくつかの追加のフラグを使用して、どこにどのように保存するかを制御できます。

  • -P, --save-prod: パッケージは依存関係に表示されます。 -Dまたは-Oが指定されていない場合、これがデフォルトです。

  • -D, --save-dev: パッケージはdevDependenciesに表示されます。

  • -O, --save-optional: パッケージは、あなたのoptionalDependenciesに表示されます。

  • --no-save: 依存関係への保存を禁止します。

上記のいずれかのオプションを使用してpackage.jsonへの依存関係を保存する場合、2つの追加のオプションフラグがあります。

  • -E, --save-exact: 保存された依存関係は、npmの既定のセーム範囲演算子を使用するのではなく、正確なバージョンで構成されます。

  • -B, --save-bundle: 保存された依存関係もbundleDependenciesリストに追加されます。

ドキュメントの説明(yarnの場合)

これは公式ドキュメントの方が詳しいだろう。

ちょっと調べてみた。

うん、全然わからん。

例えばどういうタイミングで npm i -D とするのだろうか?

というわけでそもそもdependenciesとは?というところに着目してみた。

そもそもdependenciesとは

公式ドキュメントにあった。

公式見る癖をつけるようにしていきたい。

Specifying Dependencies

プロジェクトが依存するパッケージを指定するには、package.jsonファイルで使用するパッケージを一覧表示する必要があります。 リストできるパッケージには2種類あります:

  • "dependencies": これらのパッケージは、アプリケーションで本番環境で必要となります。
  • "devDependencies": これらのパッケージは、開発とテストのためにのみ必要です。

つまり、productionで必要なパッケージはdependencies で、developmentで必要なパッケージにはdevDependenciesを付けるということだ。

うん。かんぜんにりかいした。

簡単に依存関係を追加する方法

The --save and --save-dev install flags

依存関係をpackage.jsonに追加する簡単な方法(より素晴らしい方法)は、コマンドラインから行うことです。どのようにしたいかに応じて、 - saveまたは--save-devのいずれかでnpm installコマンドにフラグを立てます。そして、その依存関係を使用してください。

  • package.jsonの依存関係にエントリを追加するには:
npm install --save <package_name>
        or
yarn add <package_name>
  • package.jsonのdevDependenciesにエントリを追加するには:
npm install --save-dev <package_name>
        or
yarn add --dev <package_name>

参考

install | npm Documentation

05 - Working with package.json | npm Documentation

yarn add | Yarn

npm からの移行 | Yarn

webpack-dev-serverの`--open`使う時、任意のブラウザで開く方法

僕は色々理由があってMacのデフォルトのブラウザはSafariにしています。

こういう時、webpack-dev-server --openと記述しているとSafariが開いてしまいます。まぁ当たり前なんだけど

ChromeFirefoxで開きたい時どうしたらいいもんかなーって思ってMastodonで投稿したらwebpack-dev-server --open "Google Chrome"ってやるとよいよとリプを貰いました。

mstdn.mimikun.jp

mstdn.maud.io

package.json(修正後)

ダブルクォーテーションで囲まれてるところなので忘れずに\"ほげほげ\"とやっときます。

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open \"Google Chrome\""
  },

GobyでHello World してみた

はてブホッテントリを眺めていたところ、Gobyという言語についての記事があったので環境構築&Hello Worldしたくなったのでやってみた。

GobyはRuby + Go みたいな感じらしい。

インストール方法

brewで一発。

brew tap goby-lang/goby
brew install goby

Hello World コード

サーバ立ててHello Worldと出す感じかな? よくわからない・・・

これと同じものを使っている。

require "net/simple_server"

server = Net::SimpleServer.new("3000")

i = 0

server.get("/") do |req, res|
  puts(i)
  i = i+1
  res.body = req.method + " Hello World"
  res.status = 200
end

server.get("/not_found") do |req, res|
  res.body = "Not Found"
  res.status = 404
end

server.start

Pleromaを入れてみた話

一部では話題になっているPleromaを入れてみました。

できたものはこれです。 Pleroma/mimikun-Dev

所要時間は多分5hくらい。

最初はAWSで立てようと思っていましたが、MastodonのフォロワーさんがMastodonが動いているサーバで一緒に動かしても大丈夫と言っていたのでそうしてみることにしました。

環境

手順

既にMastodonが入っているサーバに入れました。

1. いろいろアップデート

sudo apt update
sudo apt upgrade -y

2. 必要なものを入れていく

sudo apt install git build-essential openssl ssh sudo postgresql-9.6 postgresql-contrib-9.6

postgres-9.6なんかないよ??と言われるのでリポジトリを追加します。

3. postgresのリポジトリを追加する

sudo vim /etc/apt/sources.list.d/pgdg.list
echo 'deb http://apt.postgresql.org/pub/repos/apt/ xenial-pgdg main' > /etc/apt/sources.list.d/pgdg.list
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | \
apt-key add -

その後postgres-9.6を入れます。

sudo apt update
sudo apt install postgresql-9.6 postgresql-contrib-9.6

4. Elixirを入れる

まずリポジトリを追加します。 なにもせずapt installすると古いものが入るためです。

wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
dpkg -i erlang-solutions_1.0_all.deb

リポジトリ追加が終わったら、erlang-solutions_1.0_all.debは不要なので消しておきます。

rm erlang-solutions_1.0_all.deb

Elixirなどを入れていきます。

sudo apt update
sudo apt install elixir erlang-dev erlang-parsetools erlang-xmerl

5. Pleromaユーザを追加する

Pleroma用のユーザを追加します。

su root
adduser pleroma

パスワードを適切に入力します。

それ以外はEnter連打で大丈夫だと思います。よく知らんけど

usermod -aG sudo pleroma

pleromaをsudoグループに入れます。

これでsudo出来るようになります。

su pleroma

ユーザを切り替えます。

cd ~

ホームディレクトリに移動しておきます。

6. Pleroma本体を入れる

GitLabからソースコードをcloneしてきます。

フォークしておくと色々役立つのでフォークしてから入れた方が色々と良いです。

git clone https://git.pleroma.social/username/pleroma

依存関係のインストールをしていきます。

mix deps.get

途中でなにかインストールを求められたらYと答えておきます。

次に、設定ファイルの作成をします。

mix generate_config

少し時間がかかります。

ここでも途中でなにかインストールを求められたらYと答えておきます。

色々Warningが出ますが大丈夫らしいので気にしないで待ちましょう。

すると、こういうのが出ます。

What is your domain name? (e.g. pleroma.soykaf.com):
What is the name of your instance? (e.g. Pleroma/Soykaf):
What's your admin email address:

それぞれの欄に、ドメイン名、インスタンス名、管理者のメールアドレスを答えます。

その後、こういうのが出てきます。

メディアプロキシを有効にするか?ってことらしいです。

Do you want to activate the mediaproxy? (y/N):

自分はyと答えましたが、そうするとなぜか画像が表示されなくなったのでNにしておくといいと思います。

Pleromaなんもわからん

このメディアプロキシに関して詳しくはここにあります。

ここまでの質問に答えると、config/generated_config.exsという色々な設定が書かれたファイルが生成されます。

その後、config/generated_config.exsconfig/prod.secret.exsにリネームします。

mv config/generated_config.exs config/prod.secret.exs

続いて、データベースのセットアップをします。

sudo su postgres -c 'psql -f config/setup_db.psql'

続いて、データベースのマイグレーションをします。

MIX_ENV=prod mix ecto.migrate

7. SSL証明書の設定

SSL証明書の設定をします。

僕はLet’s Encryptを使いました。

sudo systemctl stop nginx
sudo letsencrypt certonly --standalone -d example.com

メールアドレス入力を求められたら入力しておきます。

SSL証明書の期限切れが近づくと入力したメールアドレスにメールが来ます。

8. nginxの設定

nginxの設定をします。

Pleromaは親切なつくりなので、テンプレートが用意されています。

なのでこれをコピーしていきます。

cp /home/pleroma/pleroma/installation/pleroma.nginx /etc/nginx/sites-enabled/pleroma.nginx

ドメイン名を編集していきます。

sudo vim /etc/nginx/sites-enabled/pleroma.nginx

Vimの置換でexample.tldを自分のドメインに置き換えておきます。

その後、nginxの再起動をします。

sudo systemctl start nginx
sudo systemctl restart nginx

9. Pleromaのサービス化

これもテンプレートを用意してくれています。とても親切です。

cp /home/pleroma/pleroma/installation/pleroma.service /etc/systemd/system/pleroma.service

コピーしたら少し編集します。

sudo vim /etc/systemd/system/pleroma.service

[Service]のEnvironmentを編集します。

[Service]
User=pleroma
WorkingDirectory=/home/pleroma/pleroma
- Environment="HOME=/home/pleroma"
+ Environment="MIX_ENV=prod"
ExecStart=/usr/local/bin/mix phx.server
ExecReload=/bin/kill $MAINPID
KillMode=process
Restart=on-failure

Environment="MIX_ENV=prod"になっていればOKです。

10. Pleromaの起動

sudo systemctl enable --now pleroma.service
sudo systemctl start pleroma.service

(僕の環境ではFailed to execute operation: Invalid argumentが出てきた。 sudo systemctl is-enabled pleroma.serviceでenableになっているか確認するとenableになっていた。まぁ多分大丈夫だと思います。)

これで終わりです。おつかれさまでした。

感想

Elixirなんにもわからなくても立てられるという感じでした。まぁそりゃそうか

フロントエンドはVueで書かれているらしいのでVueを勉強したくなりました。

参考にしたサイト

ubuntuにpleromaを入れてなんとなく動かす – Theoria Note

PleromaをGoogle Cloud Platformで建ててみた - Qiita

How to activate mediaproxy · Wiki · Pleroma / pleroma · GitLab

Pleroma / pleroma · GitLab

Elmの環境構築メモ

Elmのインストール

インストーラからインストールできるようです。

Install · An Introduction to Elm

私はnpmで入れました。

npm i -g elm

エディタの設定

私はAtomを使っているので、Atomの設定だけ書いておきます。

language-elmを入れます。

apmを使うと一発で入ります。

apm i language-elm

構文が比較的シンプルで良いな、と思ったのでちょっとElmで遊んでみようと思います。

MastodonのWeb UI左下にいる象さんを別なイラストに置き換えた

MastodonのWeb UI左下にいる象さんを別なイラストに置き換えたかったので置き換えてみました。

ソースコードのリンクはここにあります。

github.com

手順

2通りあります。

1. リネームして入れる

一番簡単です。

cd mastodon
cp 置き換えたい画像.svg app/javascript/images/elephant_ui_plane.svg
mv app/javascript/images/elephant_ui_plane.svg app/javascript/images/elephant_ui_plane_old.svg
mv app/javascript/images/置き換えたい画像.svg app/javascript/images/elephant_ui_plane.svg

2. ソースコードのリンクを書き換える

更新の時手間取る可能性があります。

  1. 置き換えたい画像をディレクトリにコピーしてくる
cd mastodon
cp 置き換えたい画像.svg app/javascript/images/
  1. mastodon/app/javascript/mastodon/features/compose/index.jsの15行目をこのように書き換える
- import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
+ import elephantUIPlane from '../../../images/置き換えたい画像.svg';

結果

before: 左 after: 右

f:id:mimikun_343:20180330161214p:plain f:id:mimikun_343:20180330161527p:plain