今天筆者將正式將專案與atlas資料庫做連結，目前專案的檔案結構如下：

.env
eslint.config.js
index.html
jsconfig.json
package-lock.json
package.json
public
└── favicon.ico
README.md
src
├── App.vue
├── components
│   ├── Login.vue
│   └── SignUp.vue
├── main.js
└── server
    └── index.js
vite.config.js

這次新增了 .env 檔，並對 src/server/index.js 做了變更。

環境變數 env

之前提到過往往我們的程式在與雲端做連結時會需要用到帳密等私密內容，因此我們可以使用「環境變數 Environment Variables」來讓程式能正常執行的情況下，將部份資訊給隱藏起來。

首先需要先為專案安裝 dotenv：

npm install dotenv

接著建立一個名為 .env 的檔案，並於以下加入以下內容，其中 VAR_NAME 為我們所取的便入名稱，而 VAR_DATA 為其數值：

# .env
VAR_NAME=VAR_DATA

資料庫的連結

以下為目前 src/server/index.js 的程式碼內容：

import { MongoClient, ServerApiVersion } from 'mongodb';
const db_uri = process.env.DB_URI

// Create a MongoClient with a MongoClientOptions object to set the Stable API version
const client = new MongoClient(db_uri, {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  }
});

async function run() {
  try {
    await client.connect();

    const database = client.db("terrible_login_dev");
    const accounts = database.collection("accounts");
    await accounts.createIndex({ username: 1 }, { unique: true });
    await accounts.createIndex({ password: 1 }, { unique: true });

    console.log("Pinged your deployment. You successfully connected to MongoDB!");
  } finally {
    await client.close();
  }
}
run().catch(console.dir);