NuxtJS - Triển khai Nuxt.js

2023-11-20 10:48:55 NuxtJS Học Lập Trình JavaScrip 29 lượt xem 0 bình luận

Trong bài viết này, chúng ta sẽ tìm hiểu cách có thể triển khai ứng dụng NuxtJS. NuxtJS cung cấp cho bạn khả năng lưu trữ ứng dụng web tĩnh để dễ dàng triển khai trên dịch vụ lưu trữ miễn phí như Github, Vercel. Dưới đây mình sẽ hướng dẫn cho bạn cách lưu trữ trên hai dịch vụ này.

**Tạo ứng dụng NuxtJS:**

**Bước 1:** Bạn có thể tạo dự án NuxtJs mới bằng lệnh bên dưới:

```
npx create-nuxt-app gfg
```

**Bước 2:** Bây giờ hãy điều hướng đến ứng dụng của bạn bằng lệnh sau:

```
cd gfg
```

**Cấu trúc dự án:** Nó sẽ trông như thế này.

![](/images/2023/3/11/23-1700720167-dirnuxtjs.png)

**Bước 3:** Bây giờ thay đổi nội dung của tệp ```index.vue``` trong thư mục ```pages``` với nội dung bên dưới.

*index.vue*

```javascript
<template> 
    <div> 
        <h3>This is the GFG Page.</h3> 
    </div> 
</template> 
```

**Chạy ứng dụng:** Dùng lệnh bên dưới để chạy ứng dụng.

```
npm run dev
```

**Đầu ra:**

![](/images/2023/3/11/23-1700720169-nuxtvercel1.gif)

**Tạo tệp tĩnh:** Dùng lệnh bên dưới để chạy ứng dụng.

*Dùng npm:*

```
npm run generate
```

*Dùng yarn:*

```
yarn generate
```

Nó sẽ tạo một thư mục ```dist``` chứa mọi thứ bên trong sẵn sàng để triển khai trên dịch vụ lưu trữ.

### 1- Triển khai trên Github

**Bước 1:** Tạo tài khoản mới trên [Github](https://github.com/). Nó hoàn toàn miễn phí

**Bước 2:** Thêm một số thuộc tính vào tệp ```nuxt.config.js```

Bạn phải đảm bảo sử dụng mục tiêu tĩnh, [xem thêm](https://v2.nuxt.com/docs/features/deployment-targets/)

```javascript
export default {
  target: 'static'
}
```

Thông thường cấu hình Github sẽ có dạng:

```
http://{username}.github.io/{repo-name}
```

Ở đây của tôi:

```
http://anuupadhyay.github.io/gfg
```

Thêm cấu hình cơ sở của bộ định tuyến vào ```nuxt.config.js```

```javascript
export default {
  target: 'static',
  router: {
    base: '/gfg/'
  }
}
```

**Bước 3:** Thêm mục ```deploy``` vào mục lệnh ```scripts``` của bạn trong tệp ```package.json```

```javascript
"scripts": {
  "dev": "nuxt",
  "generate": "nuxt generate",
  "start": "nuxt start",
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},
```

**Bước 4:** Trong bước này, hãy tạo kho lưu trữ ```git``` trong thư mục của ứng dụng, và thêm kho lưu trữ GitHub dưới dạng ```remote``` trong kho lưu trữ ```git``` cục bộ của bạn. Điều này sẽ giúp gói ```gh-pages``` biết nơi bạn muốn nó triển khai ứng dụng của mình. Nó cũng sẽ giúp ```git``` biết bạn muốn nó đẩy mã nguồn của mình vào đâu.

```
git init
git remote add origin https://github.com/anuupadhyay/gfg.git
```

**Bước 5:**  Bây giờ đây là điều kỳ diệu. Thực hiện theo lệnh bên dưới để triển khai mã của bạn trên trang GitHub.

*Dùng npm:*

```
npm run deploy
```

*Dùng yarn:*

```
yarn deploy
```

Đó là nó. Ứng dụng NuxtJS của bạn đã được xuất bản trên trang GitHub của bạn.

**Bước 6:** Tại thời điểm này, nếu bạn khám phá kho lưu trữ GitHub, bạn sẽ nhận thấy rằng nhánh ```master``` không tồn tại, nhánh ```gh-pages``` đã tồn tại. Vì vậy, để tạo một nhánh ```master``` mặc định và đẩy mã nguồn của bạn vào đó, hãy chạy lệnh dưới đây.

```
git add .
git commit -m "NuxtJS publish it to GitHub"
git push origin master
```

Sau bước cuối cùng này bạn sẽ nhận thấy rằng nhánh ```master``` hiện đã tồn tại và nó chứa mã nguồn của ứng dụng NuxtJS của bạn.

### 2- Triển khai trong Vercel

Trong vercel, bạn có thể triển khai các ứng dụng Nuxtjs tĩnh mà không cần bất kỳ cấu hình nào. Vercel sẽ phát hiện rằng bạn đang sử dụng NuxtJS và sẽ kích hoạt các cài đặt chính xác cho quá trình triển khai của bạn. Bạn có thể dễ dàng triển khai dự án NuxtJs của mình trong vercel bằng các bước dưới đây.

**Bước 1:** Tạo tài khoản mới trên Vercel. Nó hoàn toàn miễn phí và không yêu cầu thẻ tín dụng.

![](/images/2023/3/11/23-1700720168-signupvercel.png)

**Bước 2:** Sau khi đăng nhập, bạn có thể thấy nút ```Create a new Project```. Bấm vào nó để tạo một dự án mới,

**Bước 3:** Sau đó, nhấp vào ```import from GitHub``` và bạn có thể xem danh sách kho lưu trữ GitHub của mình. Chọn dự án NuxtJs của bạn và thế là xong. Ứng dụng của bạn đã được triển khai.

![](/images/2023/3/11/23-1700720168-github.png)

**Đầu ra:**

![](/images/2023/3/11/23-1700720169-nuxtvercel.gif)

**Thêm biến môi trường:** Trong vercel, bạn có thể dễ dàng thêm biến môi trường. Thực hiện theo các bước dưới đây để thêm các biến môi trường.

**Bước 1:** Đi tới bảng điều khiển của dự án đã triển khai của bạn.

**Bước 2:** Click vào nút cài đặt.

![](/images/2023/3/11/23-1700720168-settings.png)

**Bước 3:** Nhấp vào các biến môi trường ở phía bên trái.

![](/images/2023/3/11/23-1700720168-environmentvariables.png)

**Bước 4:** Bây giờ bạn có thể thêm các biến môi trường của mình tại đây.

![](/images/2023/3/11/23-1700720168-environmentvariabless.png)

------

***Mục lục:***

[- Thẻ Meta trong Nuxt.js](/learn/detail?learnId=28)

[- Các lệnh Nuxt.js](/learn/detail?learnId=29)

[- Định tuyến trong Nuxt.js](/learn/detail?learnId=30)

[- Triển khai Nuxt.js](/learn/detail?learnId=31)

Sau khi bạn nắm vững căn bản của mình giới thiệu, bạn có thể vào các trang này để tiềm hiểu nâng cao

[- Nuxt 2 - Tutorials](https://v2.nuxt.com/tutorials/)

[- Nuxt 3 - Tutorials](https://nuxt.com/docs/getting-started/installation)

- Tổng hợp và hướng dẫn về System Admin,
Server, Cloud, Docker, Monitor.
- Hướng dẫn lập trình Backend, Website.
- Hướng dẫn lập trình App Android & IOS.
- Hướng dẫn lập trình Games.
- Học từ vựng và luyện kỷ năng ngoại ngữ.