Running Vue on AWS EC2 with Ubuntu | 點燈坊

If we can run Vue by Docker on the local machine, we can run Vue by Docker on AWS EC2.

Version

Vue 3.2.0
Ubuntu 20.04
Docker 20.10.7
Docker-compose 1.25.0

Dockerfile

dockerfile

FROM nginx:alpine
COPY dist /usr/share/nginx/html

• Build Vue image by Nginx image
• Copy all files in dist directory to /usr/share/nginx/html in image

Docker Compose

docker-compose.yml

version: "3"
services:
  nginx:
    image: vue:0.0.0
    ports:
      - "8080:80"
    restart: always

• Run container by our image
• Map port 8080 to internal port 80

NPM Config

package.json

{
  "name": "vue32-lab",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "image": "yarn build && docker build -t vue:$npm_package_version ."
  },
  "dependencies": {
    "vue": "^3.2.16"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^1.9.3",
    "vite": "^2.6.4"
  }
}

Line 8

"image": "yarn build && docker build -t vue:$npm_package_version ."

Build image by dockerfile in the current directory.

Build Image

$ yarn image

Build image by calling NPM script.

Run Container

$ docker-compose up -d

Run container by docker-compose.yml.

Vue on Local Machine

Run Vue successfully on localhost at port 8080.

Push Image

$ docker tag vue:0.0.0 oomusou/vue

Set tag from vue:0.0.0 to oomusou/vue.

$ docker push oomosou/vue

Push oomusou/vue to Docker Hub.

Login to EC2

$ ssh -i MyEC2.pem ubuntu@13.115.40.147

Login to Ubuntu server on AWS EC2 by user ubuntu.

Docker Compose

docker-compose.yml

version: "3"
services:
  nginx:
    image: oomusou/vue
    ports:
      - "8080:80"
    restart: always

• Create docker-compose.yml on AWS EC2
• Run container as oomusou/vue image

Run Container

$ docker-compose up -d

Run container on AWS EC2.

Inbound Rules

AWS EC2 only opens port 22 for SSH connection by default, we have to add port 8080 for Vue.

Vue on EC2

Run Vue successfully on 13.115.40.147 at port 8080 .

Conclusion

• The most important step to run Vue on AWS EC2 is to open port 8080 on an inbound rule