Nội dung bài viết
Như các bạn đã biết thì Vue, React hay Angular thì chúng ta có thể deploy lên S3 dễ dàng, vì những web app này hoạt động như một web tĩnh. S3 là một dịch vụ lưu trữ file của AWS nhưng nó cũng có chức năng Static Hosting nên phù hợp cho việc này. Còn các Node js server như Express hay Nuxt, Next thì các bạn phải deploy lên Ec2. Ok đơn giản vậy thôi, chúng ta vào bài nào :v
Chuẩn bị
- Bạn cần một instance EC2, nếu chưa có bạn có thể tham khảo tại đây
- Source code Nuxt tất nhiên rồi :v.
Bắt đầu
Truy cập vào instance EC2
Mở một SSH Terminal lên ( Git bash chẳng hạn), vào cùng thư mục với file .pem
chmod 400 Tên_file.pem ssh -i Tên_file.pem ec2-user@ipv4_public_của_instance
Nếu có hỏi thì gõ yes
Update AMI
sudo yum update
Cài NVM
Ở đây các bạn vào https://github.com/nvm-sh/nvm để coi version mới nhất. Tại lúc mình viết bài thì thì là v0.35.2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
để xác nhận là đã cài thành công thì các bạn gõ
logout
và đăng nhập lại instance gõ
nvm -v
Nếu hiện ra version thì là đã ok rồi đó
Cài Node
nvm install node
node -v
Cài Git và pull code
sudo yum install git -y
git version
Tiếp theo các bạn pull code từ source git về, nên kèm username và password luôn nhé, để lần sau khỏi nhập lại password
git clone Url_Git_Của_Bạn
Build and Run Project
Lúc này các bạn cd
vào thư mục git vừa pull, npm i
để cài các package và build project
npm run build
để coi project start có lỗi lầm gì không thì gõ tiếp
npm run start
Ok, như vậy thì các bạn đã chạy thành công rồi, nhưng sẽ gặp vấn đề là khi tắt terminal thì Project của bạn cũng bị tắt theo. Lúc này giải pháp là dùng Pm2
. Các bạn ngăt project đang run ( ở windows thì là Ctrl + C
) và gõ tiếp
npm install pm2 -g
sao khi cài thành công thì các bạn cd vào thư mục nuxt vừa rồi
pm2 start npm -- start
pm2 save
pm2 startup
Note: trong trường hợp các bạn gặp lỗi do port đang được sử dụng thì các bạn có thể tắt process đang chạy bằng cách dưới đây ( Mình ví dụ port 3000 ), sau đó run lại pm2
sudo kill -9 \$(sudo lsof -t -i:3000)
Kiểm tra ứng dụng
Vào Group Policy mở port 3000 lên và test với Ipv4 Public của instance. ví dụ: 14.122.323.11:3000
Cài Nginx hoặc Apache
Ở bước này các bạn chọn cài 1 cái thôi nhé, với mình thì mình sẽ cài Apache
- Apache
sudo yum -y install httpd
sudo systemctl start httpd
sudo systemctl enable httpd
sudo systemctl status httpd
Nếu hiện lên dòng chữ active
tương tự như thế này thì bạn đã cài đặt và đã active
Apache thành công.
Nếu hiện lên dòng chữ active
tương tự như thế này thì bạn đã cài đặt và đã active
Apache thành công.
Các bạn vào lại public Ipv4 để test, nếu xuất hiện trang Apache thì apache đã chạy trên web của bạn
Tiếp theo chúng ta sẽ cấu hình chuyển nốt port 3000 sang port 80 ở trong sever ( lưu ý lúc này vì đã xóa port 3000 ở trên Inbound Ec2 nên chúng ta không truy cập được ipv4:3000
như trên
sudo nano /etc/httpd/conf/httpd.conf
Các bạn vào file này copy dòng này vào, 3000 là port mà app mình đang chạy, chú ý phải có dấu /
<Location / >
ProxyPass http://localhost:3000/
</Location>
Sau đó nhấn Ctr+X để thoát ra và lưu, enter để thoát ra.
Để kiểm tra cấu hình Apache có thành công hay chưa thì ta gõ tiếp. Nếu xuất hiện thông báo chữ xanh thì đã ok rồi đó
sudo httpd -t
Lúc này ta chỉ cần restart Apache lại và tắt terminal bình thường. Project đã được run mãi mãi
sudo systemctl restart httpd
- Nginx Cài đặt nginx tương tự như apache vậy
sudo amazon-linux-extras install nginx1
nginx -v
sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx
Các bạn vào lại Group Policy xóa port 3000 đi và mở port 80.
Các bạn vào lại public để test, nếu xuất hiện trang Nginx thì các bạn đã cài thành công
Tiếp theo là chỉnh sửa file nginx để chuyển port 3000 -> 80. Các bạn cd ra thư mục root và gõ
sudo nano /etc/nginx/nginx.conf
Các bạn dùng phím điều hướng tìm đến dòng server và đổi thành như thế này
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name localhost;
root /usr/share/nginx/html;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass \$http_upgrade;
}
}
Sau đó nhấn Ctr+X để thoát ra và lưu, enter để thoát ra.
Để kiểm tra cấu hình nginx có thành công hay chưa thì ta gõ tiếp. Nếu xuất hiện thông báo chữ xanh thì đã ok rồi đó
sudo nginx -t
Lúc này ta chỉ cần restart nginx lại và tắt terminal bình thường. Project đã được run mãi mãi
sudo systemctl restart nginx
Truy cập lại public ipv4 trên trình duyệt để thấy project đã được chạy thành công
Tạm kết
Như vậy mình đã hướng dẫn các bạn deploy Nuxt thành công lên Ec2. Deploy Nuxt app hoàn toàn đơn giản và không có gì khó khăn cả.
Tiếp theo nếu các bạn muốn gắn domain vào EC2 thì tham khảo bài viết : Trỏ domain vào instance Ec2 của mình nhé