Deploy the Vue3 Docker image to the Google Cloud Run

Through the series of 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.

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.

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.

[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.

Read more

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

Vue.js アプリケーション を開発するにあたり、 パスワード や API Key といった 慎重に取り扱うべき データ を用いる局面が多々あります。 本記事では Vue3 + TypeScript + Vite 環境 で 環境変数 を用いることで この問題に対処する方法を紹介していきます。

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

Vue3 + TypeScript プロジェクト で Firebase の リアルタイム DB である Firestore に アクセス して データ を取得する サンプル を紹介します。 本記事では、事前に Firestore に格納しておいた データ を Vue アプリケーション で表示してみようと思います。 なお、 今回は例として、開発環境で実装していきます。

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

Vue3 + TypeScript で Mapbox の マップ を表示する サンプル を紹介します。 create-vue で作成した プロジェクト に Mapbox の 公式 JavaScript クライアント ライブラリである Mapbox GL JS を組み入れることで 簡単に マップ を実装することができます。 一方で Vue3 + TypeScript 環境向けの サンプル はあまり見受けられません。 多少 コツ のようなものも必要でしたので、 本記事で合わせて紹介していきます。

[ Vue3 + TypeScript ] 子コンポーネント で実装した ドロップダウン で選択した内容を リアクティブ に 親コンポーネント と 連携する方法

本記事では 通常 ツリー 構造となる コンポーネント の 「親 コンポーネント から 子 コンポーネント」、 「子 コンポーネント から 親 コンポーネント」 のそれぞれについて リアクティブ な データ のやりとりを TypeScript で実現する方法について ドロップボックス (Select) を例に用いて 整理していきます。