CODEWITHSUNDEEP
amazon-web-servicesvue.jsamazon-ec2
divkrsh
divkrsh

Reputation: 135

How to run Vue JS application on AWS?

The dummy_prototype_1 is a simple Vue JS application that is running fine on my local machine. Now, I uploaded my application to AWS EC2. I want to run this on a permanent URL http://3.137.154.536:8000/. However, the following code runs the server on localhost http://localhost:8080/. How can I run this on my permanent URL? Am I missing something? Let me know if any further information is required. I'm new to AWS, please, help me out.

ubuntu@ip-172-31-43-235:~$ ls
Codes
ubuntu@ip-172-31-43-235:~$ cd Codes
ubuntu@ip-172-31-43-235:~/Codes$ ls
dummy_backend_1  dummy_prototype_1  nodeserver_1
ubuntu@ip-172-31-43-235:~/Codes$ cd dummy_prototype_1/
ubuntu@ip-172-31-43-235:~/Codes/dummy_prototype_1$ npm run dev

> [email protected] dev /home/ubuntu/Codes/dummy_prototype_1
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do not use the open flag.
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.

Here is package.json:

{
  "name": "proto",
  "description": "Prototype",
  "version": "1.0.0",
  "author": "Jason",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "@melmacaluso/vue-modal": "^2.1.0",
    "firebase": "^7.14.2",
    "fusioncharts": "^3.15.1-sr.1",
    "vue": "^2.5.11",
    "vue-fusioncharts": "^3.0.4",
    "vue-router": "^3.1.6",
    "vuex": "^3.3.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

Upvotes: 5

Views: 4601

Answers (1)

dsfx3d
dsfx3d

Reputation: 382

If you are planning for host a SPA on an EC2 instance, you'll need an HTTP server like Apache.

  1. Follow this guide to install apache on EC2

  2. In your local system, build your vue project.

    npm run build

  3. A dist/ folder will be generated in the project root.

  4. Upload the contents of dist/ to /var/www/html on your EC2 instance.

[Edit] add history mode support config for apache.

For history mode you'll need to configure the server like this:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

From this post.

[Edit] Upload dist to EC2 instance

From your project root, run the following command.

scp -i /path/to/ec2key.pem -r dist/ ubuntu@ip-172-31-43-235:/var/www/html

[Edit] Restart Apache2 server

sudo service apache2 restart

Upvotes: 6

Related Questions