Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

サブディレクトリでNext.jsのアプリをデプロイしたい!!

結構こういう要求はあるとおもいます。

解決する課題

  • /staticへのリンクが途切れる
  • <Link>で遷移するとbasepathが変わる

つまり、サブディレクトリ以下でNext.jsを使ったSPAをしたい!!という人向けの記事です。

/staticへのリンクをサブディレクトリ以下になるようにする

たとえばexample.com/next-appでデプロイしたいとき、example.com/next-app/_next/static以下にJSファイルなどは置かれます。しかし、なにも設定しないままだとNext.jsではexample.com/_next/staticへのリンクを張るため404となってしまいます。

これを解決するには、next.config.jsでassetPrefixを設定する必要があります。

const isProd = process.env.NODE_ENV == 'production';

const url = isProd ? 'https://example.com/next-app' : '';
module.exports = {
    assetPrefix: url,
}

これでローカルでも本番環境でも/staticへアクセスできるようになります。

<Link>で遷移するとbasepathが変わる

上の方法で/staticへアクセスできるようになりました。しかし、実はルーティングをしている場合これだけでは対応が不十分です。

たとえば以下のような<Nav>を考えます。

import * as React from 'react';
import Link from 'next/link';

const Nav = () => (
    <nav>
        <ul>
            <li><Link href="/"><a>Top</a></Link></li>
            <li><Link href="/about"><a>About</a></Link></li>
            <li><Link href="/content"><a>Content</a></Link></li>
        </ul>
    </nav>
);

このNav要素はローカル環境ではなんの問題もなく動作します。しかし、本番環境ではうまく動作してくれません。たとえば本番環境でAboutをクリックすると、example.com/aboutへとURLが変わります。もうおわかりですね。この状態でリロードするとページが読み込まれません。

この問題の解消方法はとても簡単です。as属性をつけてあげるだけです。

<Link href="/about" as="/next-app/about"><a>About</a></Link>

しかし、今度はローカルでうまく動作しません。困りましたね。

設定で切り替える

参考: Deploy your NextJS Application on a different base path (i.e. not root)

どうやらNext.jsにはnext.config.jsから値を取ってくる機能があるようです。

import getConfig from 'next/config';

const {publicRuntimeConfig} = getConfig();

こうするとnext.config.jsで設定したpublicRuntimeConfigの値を取ってこられるようになります。あとはこれを設定して、Linkのasでこれを使った設定をしてやれば完成です。詳しいコードはこちらを参考にしてください。

参考

Codeforcesで精進するときに便利なツールの紹介

github.com

今回はこちらのツールを紹介します(なぜか日本語記事でCodeforces向けのツール紹介がなかったので)

ツール概要

このツールは以下のような便利機能を提供しています。

  • テストケースのダウンロード・ディレクトリセットアップ
  • テンプレートファイルからコードの生成
  • 提出
  • コンテストへの参加・カウントダウン表示

online-judge-toolsやatcoder-cliをご存知なら、それのCodeforces版のようなものです。

インストール

コンパイル済みのバイナリをダウンロードするか、ソースコードからビルドします。

ダウンロードはこちらから Releases · xalanq/cf-tool · GitHub

ソースコードからビルドする場合は次のようになります。Goがインストールされている必要があります。

$ go get github.com/xalanq/cf-tool
$ cd $GOPATH/src/github.com/xalanq/cf-tool
$ go build -ldflags "-s -w" cf.go

ログイン

インストールしたら、まずCodeforcesへログインします。cf configコマンドを実行し、なにを設定するか問われるので0と入力してログイン設定へ進みます。その後必要な情報を入力してログインします。

使用例

たとえば Problem - 279B - Codeforces こちらの問題を例に見てみます。

  1. テストケースをダウンロード: cf parse 279
  2. ディレクトリへ移動: cd ./cf/contest/279/b
  3. ファイルを編集: code b.cpp
  4. テスト: cf test
  5. 提出: cf submit

atcoder-cliと似ていることが分かるかと思います。

cf submitすると、コードのジャッジ状況がターミナル上に表示されて更新されていきます。提出結果を確認するためだけにブラウザを開かずに済むので楽です。

ちょっとだけ便利にする

軽いラッパーを噛ませて、cf tでテスト、cf sで提出できるようにします。

以下はzsh用のラッパーになります。

cf() {
    if [ "s" = "$1" ]; then
        command cf submit ${@:2}
    elif [ "t" = "$1" ]; then
        command cf test ${@:2}
    else
        command cf ${@:1}
    fi
}

denite.nvimからfzf.vimに移行してみた

tl;dr

  • 操作性が良い
  • :Agコマンドが強すぎる
  • めっちゃカッコイイ!!

fzf.vimとは?

fzf.vimとはfzfを使ってファイルオープンやバッファ切り替えを行うツールです。denite.nvimと役割はかなり近いです。

fzf.vimの使い方

requirement

fzf本体を別途インストールする必要があります。公式ではホームディレクトリにインストールしていますが、$XDG_CACHE_HOME以下にインストールするとホームディレクトリが汚れなくて快適です。

$ git clone https://github.com/junegunn/fzf "$XDG_CACHE_HOME/fzf"
$ $XDG_CACHE_HOME/fzf/install --xdg --no-key-bindings --completion --no-update-rc

オプションはお好みで。

Gitを使う方法以外に、vimのプラグインとして、zshのプラグインとして管理する方法もあります(しかし結局、上の方法が一番問題が起こりづらいです)。

fzf.vimのインストール

fzf.vimをインストールします。以下ではdein.nvimを例に挙げています。その他の環境の場合はfzf.vimをご覧ください。

[[plugins]]
repo = 'junegunn/fzf.vim'
on_cmd = [
    'Files',
    'ProjectFiles',
    'Buffers',
    'BLines',
    'History',
    'Tags',
    'BTags',
    'GFiles',
    'Ag',
]
hook_add = '''
nnoremap <silent> ,a :<C-u>Ag<CR>
nnoremap <silent> ,f :<C-u>ProjectFiles<CR>
nnoremap <silent> ,b :<C-u>Buffers<CR>
nnoremap <silent> ,m :<C-u>History<CR>
set rtp+=$XDG_CACHE_HOME/fzf "$XDG_CACHE_HOMEの下にインストールした場合
" set rtp+=~/.fzf "~/.fzfにインストールした場合
'''

基本設定はこれでOKです。以下はかっこよくしたり、プロジェクトディレクトリで開くためのコードです。

hook_source = '''
function! s:find_git_root()
  " プロジェクトルートで開く
  return system('git rev-parse --show-toplevel 2> /dev/null')[:-2]
endfunction

command! ProjectFiles execute 'Files' s:find_git_root()
" command! -bang -nargs=? -complete=dir Files
"     \ call fzf#vim#files(<q-args>, fzf#vim#with_preview(), <bang>0)
command! -bang -nargs=? -complete=dir Files
    \ call fzf#vim#files(<q-args>, {'options': ['--layout=reverse', '--info=inline', '--preview', 'head -20 {}']}, <bang>0)



" Terminal buffer options for fzf
autocmd! FileType fzf
autocmd  FileType fzf set noshowmode noruler nonu

" 見た目をいい感じにする
" 参考: https://github.com/junegunn/dotfiles/blob/master/vimrc
"   https://github.com/junegunn/dotfiles/blob/master/vimrc
if has('nvim')
  function! s:create_float(hl, opts)
    let buf = nvim_create_buf(v:false, v:true)
    let opts = extend({'relative': 'editor', 'style': 'minimal'}, a:opts)
    let win = nvim_open_win(buf, v:true, opts)
    call setwinvar(win, '&winhighlight', 'NormalFloat:'.a:hl)
    call setwinvar(win, '&colorcolumn', '')
    return buf
  endfunction

  function! FloatingFZF()
    " Size and position
    let width = float2nr(&columns * 0.9)
    let height = float2nr(&lines * 0.6)
    let row = float2nr((&lines - height) / 2)
    let col = float2nr((&columns - width) / 2)

    " Border
    let top = '╭' . repeat('─', width - 2) . '╮'
    let mid = '│' . repeat(' ', width - 2) . '│'
    let bot = '╰' . repeat('─', width - 2) . '╯'
    let border = [top] + repeat([mid], height - 2) + [bot]

    " Draw frame
    let s:frame = s:create_float('Comment', {'row': row, 'col': col, 'width': width, 'height': height})
    call nvim_buf_set_lines(s:frame, 0, -1, v:true, border)

    " Draw viewport
    call s:create_float('Normal', {'row': row + 1, 'col': col + 2, 'width': width - 4, 'height': height - 2})
    autocmd BufWipeout <buffer> execute 'bwipeout' s:frame
  endfunction

  let g:fzf_layout = { 'window': 'call FloatingFZF()' }
endif
'''

使い方

:Filesまたは,fと入力するとカレントディレクトリのファイルが列挙された状態になります。エンターを押すと選択したファイルを新しいバッファーで開きます。カーソルはC-nC-pで候補を移動でき、<TAB>を押すと複数選択できます。

:Buffersは開いているバッファーの一覧を表示します。こちらは複数選択はできません。

agコマンドがインストールされている場合、:Agコマンドが利用できます。こちらはag '^(?=.)'の検索結果(カレントディレクトリ以下のすべてのファイルの内容)に対してfzfでフィルタリングするというものになっています。非常に動作が軽くて快適です。エンターを押すと該当ラインにカーソルが当たった状態でバッファーを開きます。

denite.nvimとfzf.vimの違い

PROS CONS
denite.nvim ・ ソースが豊富
・ registerを扱える
・ フィルタリングのレスポンスがfzfより悪い
fzf ・ 操作性が良い
:Agが便利
・ 動作が軽い
・ denite.nvimのregisterにあたるものがデフォルトではない

こんな感じです。フィルタリングがサクサクできるのはfzf.vimの大きなメリットだと思います。

NerdFontがうまく効かないときの対処法

半年くらい悩んでいた問題が解消できたのでまとめです

環境はUbuntu 19.10を想定しています。

1. そもそもフォント選択できていますか?

そもそもターミナルの設定でフォントをきちんと設定できていない可能性があります。正しくインストールして、ちゃんと選択されていますか?nerd fontを選べていない・等幅フォントを選べていないなどよくあります。

ターミナルエミュレータがフォントを認識できていない場合は、さらに細かいトラブルシューティングが必要です。fc-cacheする、きちんと認識されるディレクトリに入れる、fontrc(なんて奴だっけ?調べて書き直す)を設定するなどなど。詳しくは調べてください(ここで書ききれません)。

もしGNOME terminal(標準のターミナル)を使っている場合、インストールした nerd fontは認識されません。システム全体のmonoフォントを変える必要があります。GNOME Tweaksを使うとシステムのフォント設定を変えられます。システムのフォントを変えたくなければ、ターミナルエミュレータを変えましょう*1

2. アンチエイリアスを切りましょう

僕はこれができていなくてずっと悩んでいました。GNOME Tweaksのフォントの設定で、アンチエイリアスが「サブピクセル」になっていると、アンチエイリアスが有効になってしまい、下の図のように縦線が表示されます。

f:id:panda_noir:20200205182430p:plain

そのため、アンチエイリアスを切るか、「標準」を選択してください。

3. fc-cacheで更新する

Nerd fontを入れたあとは~/.config/fontconfig/fonts.confをいじらなければならない場合があります(もう正直この辺はグチャグチャ試行錯誤してた段階だったのでよくわかってません)。うまく更新していないとここの設定が反映されません。きちんとfc-cache -vを実行しましょう。

*1:デフォルトのターミナルは他のものと比べてかなりショボいので、これを機会に乗り換えをオススメします。個人的オススメはXfce4 terminalです

tmuxのプラグイン「tmux-respawn-all-panes」を公開しました

卒論ちょっと進んだマン。ドラフトの締切まであと2日…つらい…

昨日書いたこちらの記事の内容をプラグイン化してみました。

tmuxのすべてのpaneでzshrcの再読み込みをする - Panda Noir

GitHub - pandanoir/tmux-respawn-all-panes: respawn all panes with one key.

どういうプラグイン?

詳しくは昨日書いた記事をご覧ください。簡単に言うと、「デタッチ済みのセッションも含めた、すべてのpaneを再生成する」プラグインです。いちいちsource ~/.zshrcするのが面倒なときに便利です。

tmuxのすべてのpaneでzshrcの再読み込みをする - Panda Noir

tpmを使っている場合、以下を書くだけでインストールできます。

set -g @plugin "pandanoir/tmux-respawn-all-panes"

あとはPrefix - Rを押すだけで再起動できます。簡単ですね。

tmuxプラグインの作り方

tpmリポジトリにすでにわかりやすい解説が書いてあるので、ぜひ読んでみてください。

github.com

終わりに

とても簡単にプラグインが作れたのでビックリしました。すごいですね…x