Shipit – Tự động deploy Javascript project

{
  "name": "angular-demo",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:tungnt92/angular-demo.git",
  "author": "tungnt92 <nguyeentung@gmail.com>",
  "license": "MIT",
  "devDependencies": {
    "shipit-cli": "^5.3.0",
    "shipit-deploy": "^5.3.0"
  }
}

Tham khảo việc làm JavaScript tại Hồ Chí Minh trên TopDev

Bước 3: Config shipit

Tôi đã viết sẵn 1 file shipit config với đầy đủ các chức năng mà tôi thấy cần thiết để deploy project javascipt nằm ở cuối bài viết. Các bạn có thể copy file này, sau đó sửa các config information cho phù hợp với project của mình.

Giờ tôi sẽ đi từng bước, đầu tiên tôi tạo file shipitfile.js ở root project với các init command sau:

module.exports = shipit => {
  require('shipit-deploy')(shipit)

  const stagingConfig = {
    deployUser: 'bitnami',
    key: 'doc/aws/server-staging.pem',
    deployTo: '/home/bitnami/htdocs/projects/',
  }

  // More default config goes here

  shipit.initConfig({
    staging: {
      ...stagingConfig,
      projectName: 'angular-demo',
      servers: ["bitnami@xxx.xxx.xxx.xxx"],
    },
  })
}

Chỗ này các bạn lưu ý các config sau:

• stagingConfig: tôi gom các config nào giống nhau ở các môi trường lại, mục đích cho gọn gàng và dễ import và chỉnh sửa khi cần.
• staging: alias của server mà tôi sẽ deploy project của mình lên. Các server alias thường sử dụng như production, development,…
• projectName: định danh tên của project, chỗ này sẽ dùng để xác định thư mục deploy.
• key: trong trường hợp này tôi tạo folder ./doc/aws/ để chứa các server key. Các bạn nhớ thêm vào git ignore của mình.

Sau đó tôi viết thêm task cần thiết cho việc deploy như build project, setup remote server,…

...
shipit.task("angular:deploy", async () => {
    let zipFileName = `${shipit.config.projectName}.zip`

    // Zip the dist folder into dist.zip package then remove the folder as we don't need it anymore
    await shipit.local(`cd dist && zip -r ../${zipFileName} ${shipit.config.projectName}`);

    // Create deployTo folder if it's not existed
    await shipit.remote(
      `sudo mkdir -p ${shipit.config.deployTo} && sudo chown -R ${shipit.config.deployUser}: ${shipit.config.deployTo}`
    );

    // // Copy dist.zip to servers
    await shipit.copyToRemote(zipFileName, shipit.config.deployTo);

    // // Remove the dist.zip
    await shipit.local(`rm ${zipFileName}`);

    // // remove old frontend files
    await shipit.remote(`rm -rf ${shipit.config.deployTo}/${shipit.config.projectName}/*`);

    // // On server, unzip the dist.zip file then remove the zip package
    await shipit.remote(
      `cd ${shipit.config.deployTo} && unzip -o ${zipFileName} && rm ${zipFileName}`
    );
  });

Các config mà bạn cần lưu ý:

• angular:deploy: tôi đặt tên cho task mà tôi sẽ gọi lúc deploy.
• Các task khác tôi đã để comment vào rồi, các bạn đọc trên đó.

Cuối cùng ta được file config như sau:

module.exports = function (shipit) {
  // Load shipit-deploy tasks
  require("shipit-deploy")(shipit);

  const stagingConfig = {
    deployUser: 'bitnami',
    key: 'doc/aws/server-staging.pem',
    deployTo: '/home/bitnami/htdocs/projects/',
  }

  shipit.initConfig({
    staging: {
      ...stagingConfig,
      projectName: 'angular-demo',
      servers: ["bitnami@xxx.xxx.xxx.xxx"],
    },
  })

  shipit.task("angular:deploy", async () => {
    let zipFileName = `${shipit.config.projectName}.zip`

    // Zip the dist folder into dist.zip package then remove the folder as we don't need it anymore
    await shipit.local(`cd dist && zip -r ../${zipFileName} ${shipit.config.projectName}`);

    // Create deployTo folder if it's not existed
    await shipit.remote(
      `sudo mkdir -p ${shipit.config.deployTo} && sudo chown -R ${shipit.config.deployUser}: ${shipit.config.deployTo}`
    );

    // // Copy dist.zip to servers
    await shipit.copyToRemote(zipFileName, shipit.config.deployTo);

    // // Remove the dist.zip
    await shipit.local(`rm ${zipFileName}`);

    // // remove old frontend files
    await shipit.remote(`rm -rf ${shipit.config.deployTo}/${shipit.config.projectName}/*`);

    // // On server, unzip the dist.zip file then remove the zip package
    await shipit.remote(
      `cd ${shipit.config.deployTo} && unzip -o ${zipFileName} && rm ${zipFileName}`
    );
  });
};

Đến đây về cơ bản tôi đã hoàn thành xong việc setup shipit. Tôi có thể deploy project lên môi trường staging bằng command sau:

./node_modules/.bin/shipit staging angular:deploy

ng build angular --prod --aot && ./node_modules/.bin/shipit staging angular:deploy

[project-name]-environment.sh

Ví dụ: angular-demo-staging.sh

#!/usr/bin/env bash
ng build angular --prod --aot && ./node_modules/.bin/shipit staging angular:deploy

deploy/angular-demo-staging.sh