choblog

1 xserver-vps vpsの初期設定はこちら（xserver vps 初期設定）を参考にしてみてください。 2 独自ドメイン取得 まずムームードメインで独自ドメインを取得したら、コントロールパネル→ドメイン操作→ムームーDNS→ドメイン名の「変更」をクリック→カスタム設定→「設定２へ進む」→設定を追加するをクリック→種別をA、内容にvpsのipアドレスを入力して設定を追加をクリック、完了したら今度はサブドメインにwpと入力、あとは同じく種別をA、内容にvpsのipアドレスを入力、これでドメイン、wordpress用のサブドメインの設定は完了です。 3 Docker & Dock […]

1 詳細ページ作成 前回までで投稿リストを表示させることができました、今回はそれぞれのリストのリンクをクリックしたら個々のページに遷移する流れを解説していきます。 まずは肝心の詳細ページを作成 app直下のpage.tsx内のリンクのhrefを とすることで、localhost.net/singlePost/スラッグ名〜に遷移、詳細ページ内で「スラッグ名」を受け取って、個々のページデータを取得〜表示することができます。 app/page.tsx 詳細ページ、singlePost/[slug]/page.tsx フェッチ関数、data/getSinglePost.ts 関数に渡すクエリとレスポン […]

1 記事作成 まず新規投稿を２〜３作成、それぞれタイトル、本文、アイキャッチ画像を設定しておきます。 この時リンクにかなが含まれていると読み込み時にエラーとなるので、特にタイトルに全角文字が含まれている場合は気をつけましょう。 右サイドバーの投稿タブから、リンク部分をクリックして変更しておきます。 2 WPGraphqlインストール wordpressのpluginから、wpgraphqlと検索してインストール。有効化したらサイドバーメニューからwpgraphqlのIDEを開いて以下を入力 左上のボタンを押してデータが取れていることを確認。 3 frontend-nextからデータフェッチ ま […]

1 wordpress 初期設定 前回まででdocker composeによる開発環境の構築、https-portalをwebサーバーにしてフロントエンド、wordpressの管理画面をそれぞれブラウザに表示させることができました。 今回はwordpressの初期設定をしていきます。 先ずブラウザで https://wp.localhost.net/wp-admin として言語の選択〜サイト名などを入力していきます。 「検索エンジンにインデックスさせない」のところは、インデックスさせたいのはフロントエンド側なのでチェックを入れておきます。 ユーザー名、パスワードを入力してログインできたら「外観 […]

1 functions.phpの設定 前回までで作成したディレクトリ構造 前回も書きましたがfrontend-nextはyarn create next-appで作成したものです。 それでは上から順番にまずはbackend-wp/functions.phpファイルにキャッチアップ画像をアップロードできるようにする設定を書いていきます。 backend-wp/my-theme/functions.php~ phpの閉じタグは必要ないようです。これだけでキャッチアップ画像をアップロードできるようになります。 2 Dockerfile作成 ./docker/development/Dockerfil […]

1 始めに これから数回に分けてwordpress headlessの開発を備忘録も兼ねて紹介していこうと思います。 wordpressをバックエンドとして、フロントエンドをnextjsで別に作成〜コンテンツをwordpress側からデータフェッチしてくるという構造になります。 自身の知識を少しでも深めるのが主な目的なのであくまでも参考までにm(_ _)m 2 ディレクトリ構成 frontend-nextは yarn create next-app frontend-next として作成したものです。 backend-wp/のmy-theme/に3つのファイルを置くことでwordpress側で […]

1 秘密鍵の作成。 まずローカルの~/.sshディレクトリがなければ作成して移動 とします。-f以降は鍵の名前を好きに決めます。 この場合id_ed25519_hogeという『秘密鍵』とid_ed25519_hoge.pubという『公開鍵』の2種類が作成されるので、公開鍵の方をvpsの初期設定時に登録しておきます。 これで秘密鍵の準備はできました。 2 osインストール まずはos(今回はubuntu)をインストール、先ほど作成した公開鍵も登録（インポート）します。 パケットフィルターはあとでファイアーウォールを設定するのでoffにします。 「パケットフィルター設定を追加する」をクリックしてs […]

1 秘密鍵の作成、登録。 まずはローカルで秘密鍵を作成します。 ~/.sshディレクトリがなければ作成してその中で (-f以降は鍵の名前を好きにつける)としてエンター。 id_ed25519_hogeという秘密鍵とid_ed25519_hoge.pubという公開鍵が作成されるので、公開鍵の方をさくらvpsの初期設定時に登録します。 これで秘密鍵の準備はできました。 2 vps初期設定 サーバーにログインしてosのインストールから始めます。 ubuntuを選択してパスワードを設定(忘れないようにどこかに保存) 「公開鍵をインストールする」で最初に作った公開鍵(.pubの方)をコピペ。 スタートア […]