Install WordPress on Docker Desktop on your PC, then Migrate

In this article, I would like to introduce how to prepare the WordPress environment on the PC utilizing the Docker Desktop. Some of you might face some issues when you changed some configurations or installed some plugins. Anyway, it’s a better method to keep your WordPress clean so that you can check the visibility or feasibility of this kind of local environment in advance. I would like to explain the following in this article. Install the WordPress on the Docker Desktop Migrate the production WordPress to the Local WordPress mac OS: 12.2.1 (m1 macbook pro) Docker Desktop: 4.7.1 Install the WordPress on the Docker Desktop First, I would like to … Read more

Deploy the Vue3 Docker image to the Google Cloud Run

Through the series of the articles, I’ve introduced several preparation things, such as “Build a Docker image” or “Push the Docker image“. All these articles are the required prerequisites for the goal of this article, to deploy a Vue3 application included in the Docker image into the Google Cloud Run. It might be better to focus on which part of the entire development process. I hope the below diagram will be helpful. Of course, this article is not only for the Vue application but every Container application. But please understand that what I confirm is only for the Vue application. macOS: 12.2.1 The deploy process overview The only thing for … Read more

Push the Docker image to the Google Container Register

This article is a part of the series, “Publish the Vue3 Docker Image to Google Cloud Run“. I would like to introduce the steps from the preparation of the docker push command so that we can push the Docker image to the Google Container Register (GCR) we can deploy the container to the Google Cloud Run from there. Please see the overall deployment flow below. Since I am going to use the Docker image that has been built in advance, if you would like to know how to build the Docker image, this previous article might be helpful. mac OS: 12.3.1 (m1 mac book pro) Docker Desktop: 4.7.1 Prerequisites Before … Read more

Create the Docker Image with Vue3 for the Google Cloud Run

If we would like to develop a Vue.js application and run it locally, there would be no issue to do that for everyone. However, once we would like to publish the application to the internet, it might be an issue for someone because there are so many options or steps to achieve it. So I would like to introduce the steps to deploy a Vue3 application into the Google Cloud Run through the series of articles. These steps might be one of the most simple steps to publishing your application. In this article, I would like to introduce simple steps to create a Docker Image with the Vue3 application for … Read more

Recap the essential Docker commands

In this article, I would like to recap the essential Docker commands that will be used in the upcoming articles of this series of posts. What those essential Docker commands take part in this series is creating Docker Image that is optimized for the Google Cloud Run. I would like to explain the essential commands to achieve this focusing as little as I can. What will be covered in this article In terms of the Docker commands, we would create the “Docker image” so that the Google Cloud Run could deploy with it. Even though we have to configure a little to optimize for the Google Cloud Run, those will … Read more

[Series Index Page] Publish the Vue3 Docker Image to Google Cloud Run

Through the series of several articles, I would like to introduce how to Deploy the Vue3 project to the Google Cloud Run using Docker Container. The articles would be started with the “Docker Installation”. If you’ve already done the steps included in the specific topic, you can skip each article. Note that I will use the “add typescript” option during the Vue3 project creation. Used Environment Item Detail Client PC M1 Macbook Pro, v12.3.1 Vue v3.2.x node v16.14 npm v8.3.1 TypeScript v4.6.3 Prerequisite Google Cloud project that is connected with the bIllable Google Cloud account. Series Index # Title Summary 1 Install Docker on the M1 Mac environment The steps … Read more

Install Docker on the M1 Mac environment

In this article, I will explain the Docker installation steps on the M1 Mac PC. Actually, there are no cumbersome steps compared with the other major environments. Only we can do is follow the steps introduced on the Docker Official Site. There are several installation ways provided though, I will proceed with the installer one. macOS: 12.3.1 Docker desktop: 4.7.1 Download the installer First, download the Docker Desktop for Mac installer from the official site. Note that you should click the “Mac with Apple chip” button if you are using an M1 mac PC instead of a Mac with Intel CPU. Launch the installer Once you’ve downloaded the adequate installer, … Read more

Vue3 + TypeScript 開発環境で 環境変数 を利用する方法 (.env ファイル)

Vue.js アプリケーション を開発するにあたり、 パスワード や API Key といった 慎重に取り扱うべき データ を用いる局面が多々あります。 本記事では Vue3 + TypeScript + Vite 環境 で 環境変数 を用いることで この問題に対処する方法を紹介していきます。 また、用途別に環境を分けている場合にも有効な方法でもあります。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 vue3 API: Composition API Vite 環境変数定義用 ファイル の作成 最初に Vite 環境変数 定義用の ファイル を作成していきます。 環境変数 を定義するための ファイル は vite.config.ts に記載することで、任意の場所に配置できますが、ここでは デフォルト の Path である プロジェクト の ルート ディレクトリ 直下 に作成していきます。 .env.[mode].local ファイル 開発環境 や 本番環境 といった環境別 ( Vite では Mode と読んでいます) に 環境変数 を使い分ける ニーズ に応えるため Vite では 環境変数 を格納する ファイル 名 を使い分ける ソリューション を提供しています。本記事では 開発環境 (development mode) を例に取り上げ進めていきます。 開発環境 でのみ有効な 環境変数 定義用 ファイル を作成するには .env の後に Mode 名 を追加することで実現可能です。 さて Mode 名は何を指定すれば良いでしょうか? Default: ‘development’ for serve, ‘production’ for build 上記の通り、 npm run dev … Read more

Vue3 + TypeScript プロジェクト から Firestore に接続する サンプル

Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。 vue: 3.2.33 firebase: 9.6.11 firebase-admin: 10.1.0 準備 Firestore に作成済みの データ Firestore には 以下のようなデータを作成してあります。 この データ を Vue プロジェクト で読み出して 画面に表示する アプリケーション を作っていきます。 プロジェクト作成 (Vue3 + TypeScript) まずは、Vue3 + Typescript でプロジェクトを作成します。 Vue3 プロジェクト に Firebase SDK を インストール 以下の コマンド で Firebase SDK を インストール していきます。 Firebase 接続設定情報 を Vite 環境変数に登録 Firebase に接続するためには API Key などの接続設定情報が必要になります。 これらの取得方法については 公式サイト を参照してください。この 接続設定情報 を Firebase SDK に渡すことで、Vue プロジェクト から Firebase に アクセス することができるようになります。 このように Firebase への アクセス は簡単に実現できるのですが、 逆に言うと、これらの接続設定情報 を悪用されてしまうと、第三者が簡単にあなたの課金設定済みアカウントを用いることもできてしまいます。そういった事態を避けるためにも、 Firebase 接続設定情報 は git に登録しないことが望ましいケースが多いと思います。 ここでは … Read more

Vue3 + TypeScript で Mapbox GL JS を使って マップ を表示する サンプル

Vue3 + TypeScript で Mapbox の マップ を表示する サンプル を紹介します。 create-vue で作成した プロジェクト に Mapbox の 公式 JavaScript クライアント ライブラリである Mapbox GL JS を組み入れることで 簡単に マップ を実装することができます。 一方で Vue3 + TypeScript 環境向けの サンプル はあまり見受けられません。 多少 コツ のようなものも必要でしたので、 本記事で合わせて紹介していきます。 macOS: 12.3 vue: 3.2.31 typescript: 4.5.5 mapbox-gl: 2.7.1 @type/mapbox-gl: 2.6.3 Vue3 + TypeScript プロジェクト の作成 それでは最初に 今回使用する Vue3 + TypeScript の プロジェクト を以下の要領で作成します。 create-vue で プロジェクト 作成 TypeScript のみ追加 なお プロジェクト 作成の詳細は以下の記事を参考にしてください。 Mapbox GL JS の インストール mapbox-gl の インストール 次に 作成した プロジェクト に Mapbox GL JS を 公式 サイト の手順 に従って インストール していきます。 以下の ように npm install コマンド を実行します。 無事 インストール が完了したら、 package.json に 以下のように mapbox-gl が追加されていることを確認することができます。 Type/mapbox-gl の インストール 次に … Read more