How to run Vue JS application on AWS?

Question

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"
  }
}

webpack-dev-server is meant for development. To place your app on a server just npm run build and copy the dist/ output to your server. You're done. — tao
– tao, Commented Sep 7, 2020 at 21:32

dsfx3d · Accepted Answer · 2020-09-08 09:19:54Z

6

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

Follow this guide to install apache on EC2
In your local system, build your vue project.
```
npm run build
```
A dist/ folder will be generated in the project root.
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

edited Sep 8, 2020 at 9:19

answered Sep 7, 2020 at 21:33

dsfx3d

3824 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

dsfx3d Over a year ago

@Lawrence Cherone updated the answer.

dsfx3d Over a year ago

Try restarting the server

dsfx3d Over a year ago

sudo service apache2 restart

divkrsh Over a year ago

I accidentally deleted my /var/www/html/index.html file. Now, after restarting the server, I'm getting the same output http://3.137.154.206/. Is index.html is required? If yes, how do I restore it?

dsfx3d Over a year ago

yes index.html is required. You can upload it again from your local dist folder.

|

Collectives™ on Stack Overflow

How to run Vue JS application on AWS?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related