vscode nodejs Project IDX AI docker

Project IDX 線上IDE開發程式

湯菀鈺 2024/12/10 17:19:36

0 51

Project IDX 線上IDE開發程式

本文將介紹Google IDX（Integrated Development Experience），一個基於 Visual Studio Code 的雲端開發環境，旨在提供多使用者協作和跨平台開發的便利。

簡介

Google IDX（Integrated Development Experience）基於 Visual Studio Code (VSCode) 的架構和設計，目的是提供一個雲端的開發環境。這使得使用者可以享受到 VSCode 的許多功能，如語法高亮、代碼自動完成以及即時預覽，同時還能利用雲端計算的優勢，進行多使用者協作和跨平台開發。因此，Google IDX 繼承了 VSCode 的許多特性，但也針對特定的雲端開發需求進行了調整和優化。

登入 Google IDX

前往 Google IDX 登入頁面 https://idx.google.com
使用已註冊的 Google 帳戶電子郵件登入註冊
登入成功後，進入 Google IDX 的主頁面, 點選 [Get Started]

匯入 GitHub 專案程式

點選右下角 [Import a repo] 匯入git repository
輸入 git 位置：https://github.com/wanyutang/demo-admin-nuxt3
開發環境建置中…
IDX 將會要求取得 Git Hub Repository 授權
點選 [Allow] 同意後介面會出現等下會用到的一次性 code，
點選 [Copy & Continue to GitHub] 按鈕進入 GitHub 認證畫面
登入 GitHub 網站後點選 [continue] 進入下一步
之前在 IDX 取得的 code 在這裡輸入，使用 Ctrl + P 貼上
線上 IDX 取得 GitHub 認證畫面, 點選 [Authorize Visual-Studio-Code] 進行認證
完成認證設定後回到 [[Project IDX]] 線上ID
Google IDX 基於 VSCode 的架構和設計,所以操作介面與 vscode 差不多

預覽 UI 介面

[[Project IDX]] 會自動檢測專案內容, 常見的程式架構在啟用 IDX 時會自動 build and deploy
- 需要一些時間進行 install and run,右方會出現預覽可以方便開發檢視程式修改結果
View 視窗也有提供功能另開視窗檢視測試頁面
點選 [Open] 後可以在新的 tag 測試 UI 畫面

設定 Docker 開發環境

[[Project IDX]] 雖然能自動偵側大部份的專案架構以提供適合的開發環境，
但仍有不足之處，遇到太舊的版本可能就無法支援，此時可以在線上 IDX 使用 docker image 來進行佈版測試
- dev.nix 有異動時，右下角會出現 [Rebuild Environment] 按鈕，確認設定完成後點選該功能以使用新的環境設定進行 Rebuild 開發環境
- 啟用 docker 環境需要修改 dev.nix
```
		   # .......... 略 ........
		   packages = [
		      # pkgs.go
		      # pkgs.python311
		      # pkgs.nodejs_20
		      pkgs.docker
		    ];
		    # .......... 略 ........
		    services.docker.enable = true;
```
```
packages 增加 pkgs.docker
  docker enable 設成 true
```
安裝 vscode Docker 套件
- 左方套件安裝介面找到 docker 並點選安裝
- 安裝完成左方選單會出現 Docker 套件的工具列

Docker Complse run Nodejs 專案

在專案根目錄建置 docker-compose.yml

		  version: '3'
		  services:
		    app:
		      image: node:18
		      container_name: node-app
		      working_dir: /usr/src/app
		      volumes:
		        -  .:/usr/src/app
		      ports:
		        -  "3000:3000"
		      command: sh - c "yarn install && yarn dev"
		      restart: unless-stopped
		      environment:
		        -  NODE_ENV=development

裡設定開發 port 3000 給 IDX 預覽佈版使用

右鍵選擇 [Compose Up] 啟用 Docker
CONTAINERS 工具視窗可以觀察 containers 的建置狀態，右鍵可以進行基本的操作指令

Project IDX Ports 預覽

左方找到 Project IDX 工具視窗，在最下方 [BACKEND PORTS] 可以找到 vm 3000 port 對應的 URLs
點選 [Open] 以新視窗開啟預覽頁面

Gemini in IDX

透過 Project IDX 的 Gemini API以簡化開發流程，開發者可以將這些 AI 功能嵌入到應用程式中，進一步提升開發效率
Project IDX 介面右下角點選 [Gemini] 前往啟用 AI 設定後點選 [Continue] 就可以愉快的跟 AI 聊天了

總結

雲端開發環境：Google IDX 提供雲端開發平台，讓開發者能夠隨時隨地進行開發工作。
協作功能：IDX 支持團隊協作，允許多位開發者同時工作，提升專案的協同效率。
跨平台支持：該平台支持多種作業系統和裝置，讓開發者能夠在不同環境下進行開發。
提升生產力：Google IDX 的直觀介面和強大功能能夠幫助開發者更快地完成任務，提升整體工作效率。
未來趨勢：隨著雲端技術的進步，IDX 預示著未來開發環境的趨勢，將成為開發者重要的工具。

參考來源

延申閱讀

外部連結

Volta Official Website
nvm GitHub Repository
[[Project IDX]]↗[1]
[[@Winny/Topic/Node js 與 npm 版本衝突問題討論]]↗
[[Winny Post]]↗

註腳

[1] [[Project IDX]]↗ : Project IDX is an AI-assisted workspace for full-stack, multiplatform app development in the cloud. With support for a broad range of frameworks, languages, …