DeskMini A300 + Ryzen 3400G でPCを組んだ

そろそろメインPCを新しくしなきゃなと思いながらもずっとできなかったメインPCの調達をついにやった。DeskMini A300という箱とRyzen 3400GというAPU。Ryzen APUがZen2なりになるまで待つべきかどうしようかというところで、目をつけていたDeskMini A300がツクモのセールで\12k程だったのでここだということで購入。キーボードと比較してこの大きさ。小さい。

構成は以下の通り。

ケース	DeskMini A300 (+ USB2.0ポート追加ケーブル)
CPU	Ryzen 3400G
ファン	Noctua NH-L9a-AM4
メモリ	Crucial 32GB Kit (2 x 16GB) DDR4-2666 SODIMM (CT2K16G4SFD8266)
SSD	WD BLACK SN750 NVMe 500GB (WDS500G3X0C)

このDeskMini A300、この小ささでM.2 SSD 2枚、2.5" SSD 2枚が入る。驚き。USBの口が少ないので、増設ケーブルは\1kちょいなので買っておくのがおすすめ。

CPUはRyzen 3200Gでいいかと思ったけど、結局3400Gにしてしまって、いらなかったかなと思いつつ、あとで困るよりはいいかなと。ファンはケース付属ではパワー不足ではということで、ちょっと高めだけど安牌らしいNH-L9a-AM4をチョイス。

メモリは16Gでいいかなと思いつつ、VRAMに2G持っていくそうなので、まぁ後で増やすのも面倒だしと思って32GBにしてしまった。

SSDはこの小ささなのでM.2のタイプを。Intelのやつにしようかなと思ったのだけど、WD BLACKは発熱が抑えられているそうで、これにしてみた。

ベンチマークを取ってから載せようと思ったけど、先送りされそうなのでとりあえず構成だけ。

前のPCと比較しての効果はなんといっても4K/60fps出せるようになったこと。画面がきれい。前のPCは4K出せなかったので、4Kディスプレイの意味がなかった。

SPA用にwebpack-dev-serverにproxyを設定する

SPA (Single Page Application) でWebアプリケーションを作る場合、HTMLの生成やREST APIはJavaScript/CSSの配信とは別のサーバーで行うものの、クラウド環境ではCloudFrontなりリバースプロキシなりが存在していて、結果全て同一ドメインで運用されていることがある。

この状況で、JavaScriptをローカル環境のwebpack-dev-serverで試験しようとすると、REST APIが別ポートになるのでローカル環境でだけCORSの設定が必要だったり、深いパスでリロードするとNot Foundになったりといったような面倒ごとが発生する。

これを解決するには、nginxなりでproxyを立てても良いが、webpack-dev-serverにもproxyの機能がついているので、以下のように設定すると簡単。

    devServer: {
        contentBase: 'dist',
        host: '0.0.0.0',
        port: 3000,
        proxy: {
            '/myapp/api': {
                target: 'http://127.0.0.1:9292'
            },
            '/myapp': {
                target: 'http://localhost:3000/examples/index.html',
                pathRewrite: {'^.*' : ''}
            }
        }
    }

examplesにローカル向けのindex.htmlを置いておいて、CopyWebpackPluginでコピーすると便利。

        new CopyWebpackPlugin([
            { from: 'examples', to: 'examples' }
        ]),