VueJS: Triển khai

Nguyên tắc chung

Nếu bạn đang sử dụng Vue CLI cùng với một khung công tác phụ trợ xử lý các phần tử tĩnh như là một phần của việc triển khai, tất cả những gì bạn cần làm là đảm bảo rằng Vue CLI tạo các tệp được xây dựng ở vị trí chính xác và sau đó làm theo hướng dẫn triển khai khung công tác phụ trợ của bạn.

Nếu bạn đang phát triển ứng dụng giao diện người dùng riêng biệt với chương trình phụ trợ của mình - tức là chương trình phụ trợ của bạn hiển thị API cho giao diện người dùng của bạn để nói chuyện, thì giao diện người dùng của bạn về cơ bản là ứng dụng hoàn toàn tĩnh. Bạn có thể triển khai nội dung được xây dựng trong thư mục dist tới bất kỳ máy chủ tệp tĩnh nào, nhưng hãy đảm bảo đặt baseUrl chính xác.

#Xem trước cục bộ

Thư mục dist này có nghĩa là để được phục vụ bởi một máy chủ HTTP (trừ khi bạn đã cấu hình baseUrl là một giá trị tương đối), vì vậy nó sẽ không hoạt động nếu bạn mở dist/index.html trực tiếp trên giao thức file://. Cách đơn giản nhất để xem trước bản local build production là sử dụng một máy chủ tập tin tĩnh Node.js, ví dụ serve:

npm install -g serve
# -s flag means serve it in Single-Page Application mode
# which deals with the routing problem below
serve -s dist

Định tuyến với history.pushState

Nếu bạn đang sử dụng Vue Router trong chế độ history, một máy chủ tập tin tĩnh đơn giản sẽ thất bại. Ví dụ, nếu bạn sử dụng Vue Router để truy xuất với đường dẫn /todos/42, máy chủ dev đã được cấu hình để đáp ứng localhost:3000/todos/42 đúng cách, nhưng một máy chủ tĩnh đơn giản phục vụ việc build production sẽ trả lời với một 404 thay thế.

Để khắc phục điều đó, bạn sẽ cần định cấu hình máy chủ production của mình để dự phòng index.html cho bất kỳ yêu cầu nào không khớp với tệp tĩnh. Xem tài liệu Vue Router cung cấp hướng dẫn cấu hình cho các thiết lập máy chủ thông thường.

#CORS

Nếu giao diện người dùng tĩnh của bạn được triển khai đến một tên miền khác từ API phụ trợ của bạn, bạn sẽ cần định cấu hình đúng CORS.

#PWA

Nếu bạn đang sử dụng plugin PWA, ứng dụng của bạn phải được phân phối qua HTTPS để Serve worker có thể được đăng ký đúng cách.

#Hướng dẫn nền tảng

#Trang GitHub

1. Đặt chính xác baseUrl trong vue.config.js.

   Nếu bạn đang triển khai https://<USERNAME>.github.io/, bạn có thể bỏ baseUrl mặc định là mặc định "/".

   Nếu bạn đang triển khai https://<USERNAME>.github.io/<REPO>/, (tức là kho lưu trữ của bạn đang ở https://github.com/<USERNAME>/<REPO>), được đặt baseUrl thành "/<REPO>/". Ví dụ: nếu tên repo của bạn là "my-project", bạn vue.config.js sẽ thấy như sau:

   module.exports = {
     baseUrl: process.env.NODE_ENV === 'production'
       ? '/my-project/'
       : '/'
   }
   

2. Bên trong dự án của bạn, hãy tạo deploy.sh với nội dung sau (với các dòng được tô sáng không được chú thích một cách thích hợp) và chạy nó để triển khai:

   #!/usr/bin/env sh
   
   # abort on errors
   set -e
   
   # build
   npm run build
   
   # navigate into the build output directory
   cd dist
   
   # if you are deploying to a custom domain
   # echo 'www.example.com' > CNAME
   
   git init
   git add -A
   git commit -m 'deploy'
   
   # if you are deploying to https://<USERNAME>.github.io
   # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
   
   # if you are deploying to https://<USERNAME>.github.io/<REPO>
   # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
   
   cd -
   

   Gợi ý

   Bạn cũng có thể chạy tập lệnh trên trong thiết lập CI để cho phép triển khai tự động trên mỗi lần đẩy.

#Trang GitLab

Như được mô tả trong tài liệu GitLab Pages, mọi thứ xảy ra với một tệp .gitlab-ci.yml được đặt trong thư mục gốc của kho lưu trữ của bạn. Ví dụ làm việc này sẽ giúp khởi động:

# file .gitlab-ci.yml được đặt trong root của repository của bạn

pages: # job phải được đặt tên trang
  image: node:latest
  stage: deploy
  script:
    - npm ci
    - npm run build
    - mv public public-vue # GitLab Pages hooks on the public folder
    - mv dist public # rename the dist folder (result of npm run build)
  artifacts:
    paths:
      - public # artifact path must be /public for GitLab Pages to pick it up
  only:
    - master

Thông thường, trang web tĩnh của bạn sẽ được lưu trữ trên https://yourUserName.gitlab.io/yourProjectName, vì vậy bạn cũng sẽ muốn tạo tệp vue.config.js ban đầu để cập nhật BASE_URL giá trị phù hợp:

// file vue.config.js được đặt trong root của repository của bạn
// hãy đảm bảo bạn update `yourProjectName` với tên của project GitLab của bạn

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/yourProjectName/'
    : '/'
}

Vui lòng đọc qua các tài liệu trên tên miền Trang GitLab để biết thêm thông tin về URL nơi trang web dự án của bạn sẽ được lưu trữ. Lưu ý rằng bạn cũng có thể sử dụng miền tùy chỉnh.

Cam kết cả tệp .gitlab-ci.yml và vue.config.js trước khi đẩy vào kho lưu trữ của bạn. Một đường dẫn GitLab CI sẽ được kích hoạt: khi thành công, hãy truy cập vào dự án của bạn Settings > Pages để xem liên kết trang web của bạn và nhấp vào nó.

#Netlify

1. Trên Netlify, hãy thiết lập dự án mới từ GitHub với các cài đặt sau:

   • Xây dựng Lệnh: npm run build hoặc yarn build
   • Xuất bản thư mục: dist

2. Nhấn nút triển khai!

Ngoài ra hãy kiểm tra vue-cli-plugin-netlify-lambda.

#Amazon S3

Xem vue-cli-plugin-s3-deploy.

#Firebase

Tạo dự án Firebase mới trên bảng điều khiển Firebase của bạn. Vui lòng tham khảo tài liệu này về cách thiết lập dự án của bạn.

Đảm bảo bạn đã cài đặt các công cụ Firebase trên global:

npm install -g firebase-tools

Từ gốc của dự án của bạn, khởi tạo firebase bằng lệnh:

firebase init

Firebase sẽ hỏi một số câu hỏi về cách thiết lập dự án của bạn.

• Chọn các tính năng CLI Firebase mà bạn muốn thiết lập dự án của mình. Đảm bảo chọn hosting.
• Chọn dự án Firebase mặc định cho dự án của bạn.
• Đặt thư mục public của bạn thành dist (hoặc nơi đầu ra của bản dựng của bạn) sẽ được tải lên Firebase Hosting.

// firebase.json

{
  "hosting": {
    "public": "dist"
  }
}

• Chọn yes để định cấu hình dự án của bạn dưới dạng ứng dụng một trang. Điều này sẽ tạo một index.html và trên thư mục dist của bạn và cấu hình thông tin hosting của bạn.

// firebase.json

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Chạy npm run build để xây dựng dự án của bạn.

Để triển khai dự án của bạn trên Firebase Hosting, hãy chạy lệnh:

firebase deploy --only hosting

Nếu bạn muốn các tính năng CLI Firebase khác mà bạn sử dụng trên dự án của mình sẽ được triển khai, hãy chạy firebase deploy mà không có tùy chọn --only.

Bây giờ bạn có thể truy cập dự án của mình trên https://<YOUR-PROJECT-ID>.firebaseapp.com.

Vui lòng tham khảo Tài liệu Firebase để biết thêm chi tiết.

#Bây giờ

1. Cài đặt CLI Hiện hành trên global:

npm install -g now

2. Thêm tệp now.json vào thư mục gốc của dự án của bạn:

   {
     "name": "my-example-app",
     "type": "static",
     "static": {
       "public": "dist",
       "rewrites": [
         {
           "source": "**",
           "destination": "/index.html"
         }
       ]
     },
     "alias": "vue-example",
     "files": [
       "dist"
     ]
   }
   

   Bạn có thể tùy chỉnh thêm hành vi phục vụ tĩnh bằng cách tham khảo tài liệu của Now.

3. Thêm tập lệnh triển khai vào package.json:

   "deploy": "npm run build && now && now alias"
   

   Nếu bạn muốn triển khai công khai theo mặc định, bạn có thể thay đổi tập lệnh triển khai thành tập lệnh sau:

   "deploy": "npm run build && now --public && now alias"
   

   Thao tác này sẽ tự động trỏ bí danh trang web của bạn đến triển khai mới nhất. Bây giờ, chỉ cần chạy npm run deploy để triển khai ứng dụng của bạn.

#Stdlib

TODO | Mở để đóng góp.

#Heroku

TODO | Mở để đóng góp.

#Surge

Để triển khai với Surge, các bước rất đơn giản.

Trước tiên, bạn sẽ cần phải xây dựng dự án của bạn bằng cách chạy npm run build. Và nếu bạn chưa cài đặt công cụ dòng lệnh của Surge, bạn có thể thực hiện điều này bằng cách chạy lệnh:

npm install --global surge

Sau đó, cd vào thư mục dist/ của dự án của bạn và sau đó chạy surge và làm theo dấu nhắc màn hình. Nó sẽ yêu cầu bạn thiết lập email và mật khẩu nếu đây là lần đầu tiên bạn sử dụng Surge. Xác nhận thư mục dự án và nhập tên miền ưa thích của bạn và xem dự án của bạn đang được triển khai như dưới đây.

            project: /Users/user/Documents/myawesomeproject/dist/
         domain: myawesomeproject.surge.sh
         upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes)
            CDN: [====================] 100%
             IP: **.**.***.***

   Success! - Published to myawesomeproject.surge.sh

Xác minh dự án của bạn được xuất bản thành công bởi Surge bằng cách truy cập myawesomeproject.surge.sh, vola! Để biết thêm chi tiết thiết lập như tên miền tùy chỉnh, bạn có thể truy cập trang trợ giúp của Surge.

#Bitbucket Cloud

1. Như được mô tả trong tài liệu Bitbucket, bạn cần tạo một kho lưu trữ có tên chính xác <USERNAME>.bitbucket.io.

2. Có thể xuất bản tới một thư mục con của kho lưu trữ chính, ví dụ nếu bạn muốn có nhiều trang web. Trong trường hợp đó thiết lập đúng baseUrl trong vue.config.js.

   Nếu bạn đang triển khai https://<USERNAME>.bitbucket.io/, bạn có thể bỏ mặc định baseUrl thành mặc định "/".

   Nếu bạn đang triển khai https://<USERNAME>.bitbucket.io/<SUBFOLDER>/, hãy đặt baseUrl thành "/<SUBFOLDER>/". Trong trường hợp này cấu trúc thư mục của kho lưu trữ phải phản ánh cấu trúc url, ví dụ kho lưu trữ nên có một thư mục /<SUBFOLDER>.

3. Bên trong dự án của bạn, hãy tạo deploy.sh với nội dung sau và chạy nó để triển khai:

   #!/usr/bin/env sh
   
   # bỏ qua các lỗi
   set -e
   
   # build
   npm run build
   
   # điều hướng vào thư mục output build
   cd dist
   
   git init
   git add -A
   git commit -m 'deploy'
   
   git push -f git@bitbucket.org:<USERNAME>/<USERNAME>.bitbucket.io.git master
   
   cd -