Thông thường khi làm việc với Node.js project, chúng ta thường sẽ ignore thư mục node_modules, dùng để chứa các Node.js dependencies, khi commit lên các hệ thống quản lý source code như Git, SVN bởi vì nó không cần thiết. Chúng ta có thể sử dụng câu lệnh “npm install” để install các dependencies khi muốn chạy ứng dụng trên máy của mình. Nhưng có một vấn đề đặt ra là khi các bạn muốn triển khai CI/CD cho project Node.js của mình, cần mọi thứ sẵn sàng để có thể deploy ứng dụng lên production, làm thế nào để có thể tự động install các Node.js dependencies này? Nếu project của các bạn có sử dụng Apache Maven thì các bạn có thể sử dụng một plugin tên là frontend-maven-plugin để làm điều này. Cụ thể như thế nào? Chúng ta hãy cùng nhau tìm hiểu trong bài viết này các bạn nhé!
Đầu tiên, mình sẽ tạo mới một Maven project để làm ví dụ:
Tiếp theo, mình sẽ khai báo sử dụng plugin frontend-maven-plugin như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> </plugin> </plugins> </build> </project> |
Điều đầu tiên mà các bạn cần biết về plugin frontend-maven-plugin là nó cho phép chúng ta có thể cài đặt Node.js vào project của chúng ta luôn. Điều này có nghĩa, bạn không cần phải cài Node.js vào máy của các bạn.
Để làm được điều này, đầu tiên các bạn cần cấu hình phiên bản của Node.js mà các bạn cần cài đặt:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <nodeVersion>v9.9.0</nodeVersion> </configuration> </plugin> </plugins> </build> </project> |
sau đó thì thêm một phần cấu hình execution với goal là “install-node-and-npm” như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <nodeVersion>v9.9.0</nodeVersion> </configuration> <executions> <execution> <id>install node</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project> |
Lúc này, nếu các bạn chạy “mvn install”, các bạn sẽ thấy kết quả như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
[INFO] Scanning for projects... [INFO] [INFO] ------------------------------------------------------------------------ [INFO] Building maven-nodejs 0.0.1-SNAPSHOT [INFO] ------------------------------------------------------------------------ [INFO] [INFO] --- frontend-maven-plugin:1.6:install-node-and-npm (install node) @ maven-nodejs --- [INFO] Installing node version v9.9.0 [INFO] Downloading https://nodejs.org/dist/v9.9.0/node-v9.9.0-darwin-x64.tar.gz to /Users/Khanh/.m2/repository/com/github/eirslett/node/9.9.0/node-9.9.0-darwin-x64.tar.gz [INFO] No proxies configured [INFO] No proxy was configured, downloading directly [INFO] Unpacking /Users/Khanh/.m2/repository/com/github/eirslett/node/9.9.0/node-9.9.0-darwin-x64.tar.gz into /Users/khanh/Working/Workspace Eclipse/maven-nodejs/node/tmp [INFO] Copying node binary from /Users/khanh/Working/Workspace Eclipse/maven-nodejs/node/tmp/node-v9.9.0-darwin-x64/bin/node to /Users/khanh/Working/Workspace Eclipse/maven-nodejs/node/node [INFO] Extracting NPM [INFO] Installed node locally. [INFO] [INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ maven-nodejs --- [WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platform dependent! [INFO] Copying 0 resource [INFO] [INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ maven-nodejs --- [INFO] Nothing to compile - all classes are up to date [INFO] [INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ maven-nodejs --- [WARNING] Using platform encoding (UTF-8 actually) to copy filtered resources, i.e. build is platform dependent! [INFO] Copying 0 resource [INFO] [INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ maven-nodejs --- [INFO] Nothing to compile - all classes are up to date [INFO] [INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ maven-nodejs --- [INFO] [INFO] --- maven-jar-plugin:2.4:jar (default-jar) @ maven-nodejs --- [INFO] Building jar: /Users/khanh/Working/Workspace Eclipse/maven-nodejs/target/maven-nodejs-0.0.1-SNAPSHOT.jar [INFO] META-INF/maven/com.huongdanjava/maven-nodejs/pom.xml already added, skipping [INFO] META-INF/maven/com.huongdanjava/maven-nodejs/pom.properties already added, skipping [INFO] [INFO] --- maven-install-plugin:2.4:install (default-install) @ maven-nodejs --- [INFO] Installing /Users/khanh/Working/Workspace Eclipse/maven-nodejs/target/maven-nodejs-0.0.1-SNAPSHOT.jar to /Users/Khanh/.m2/repository/com/huongdanjava/maven-nodejs/0.0.1-SNAPSHOT/maven-nodejs-0.0.1-SNAPSHOT.jar [INFO] Installing /Users/khanh/Working/Workspace Eclipse/maven-nodejs/pom.xml to /Users/Khanh/.m2/repository/com/huongdanjava/maven-nodejs/0.0.1-SNAPSHOT/maven-nodejs-0.0.1-SNAPSHOT.pom [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 20.322 s [INFO] Finished at: 2018-06-30T20:17:39+07:00 [INFO] Final Memory: 16M/55M [INFO] ------------------------------------------------------------------------ |
Như các bạn thấy, plugin frontend-maven-plugin đã tự động download phiên bản Node.js mà chúng ta đã khai báo trong phần <configuration> từ địa chỉ https://nodejs.org/dist/v9.9.0/node-v9.9.0-darwin-x64.tar.gz, sau đó nó extract tập tin download để copy tập tin binary của Node.js là “node” vào trong thư mục project của chúng ta. Một thư mục node đã được tạo và tập tin “node” được chứa trong thư mục này. Thư viện “npm” cũng đã được download và nằm trong thư mục node_modules của thư mục node:
Chúng ta có thể thay đổi thư mục mặc định, thư mục project, này bằng một thư mục khác trong project của chúng ta. Ví dụ như, nếu các bạn muốn install Node.js trong thư mục target của project thì các bạn có thể thêm cấu hình “installDirectory” như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <nodeVersion>v9.9.0</nodeVersion> <installDirectory>target</installDirectory> </configuration> <executions> <execution> <id>install node</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project> |
Chạy lại “mvn install”, các bạn sẽ thấy kết quả như sau:
Mặc định thư mục làm việc của Node.js khi chúng ta sử dụng frontend-maven-plugin như mình nói ở trên sẽ là thư mục của project.
Điều này có nghĩa chúng ta sẽ viết code cho Node.js project trong thư mục này và do đó tập tin package.json, tập tin khai báo các dependencies mà project Node.js sử dụng, cũng sẽ nằm trong thư mục này.
Giả sử bây giờ mình tạo một tập tin package.json để làm ví dụ với nội dung như sau;
|
1 2 3 4 5 6 7 8 |
{ "name": "maven-nodejs", "version": "1.0.0", "description": "An example of using frontend-maven-plugin", "dependencies": { "express": "^4.16.3" } } |
Để có thể install các dependencies được khai báo trong tập tin package.json này, chúng ta cần khai báo thêm mới một execution với goal là “npm” trong tập tin pom.xml như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <nodeVersion>v9.9.0</nodeVersion> <installDirectory>target</installDirectory> </configuration> <executions> <execution> <id>install node</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project> |
Lúc này nếu chạy “mvn install”, các bạn sẽ thấy trong thư mục project xuất hiện thư mục node_modules chứa tất cả các dependencies mà chúng ta đã khai báo trong tập tin package.json và các phụ thuộc của nó như sau:
Chúng ta cũng có thể thay đổi thư mục làm việc mặc định của Node.js bằng cách thêm cấu hình “workingDirectory“. Ví dụ như bây giờ mình tạo một thư mục tên là “frontend” trong thư mục “src/main”, di chuyển tập tin package.json ở trên vào thư mục này và cấu hình “workingDirectory” như sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.huongdanjava</groupId> <artifactId>maven-nodejs</artifactId> <version>0.0.1-SNAPSHOT</version> <build> <plugins> <plugin> <groupId>com.github.eirslett</groupId> <artifactId>frontend-maven-plugin</artifactId> <version>1.6</version> <configuration> <nodeVersion>v9.9.0</nodeVersion> <installDirectory>target</installDirectory> <workingDirectory>src/main/frontend</workingDirectory> </configuration> <executions> <execution> <id>install node</id> <goals> <goal>install-node-and-npm</goal> </goals> </execution> <execution> <id>npm install</id> <goals> <goal>npm</goal> </goals> </execution> </executions> </plugin> </plugins> </build> </project> |
Chạy lại “mvn install”, các bạn sẽ thấy kết quả như sau:
