如何在 AWS 上运行 Vue JS 应用程序？

Question

dummy_prototype_1 是一个简单的 Vue JS 应用程序，在我的本地机器上运行良好。现在，我将我的应用程序上传到 AWS EC2。我想在永久 URL http://3.137.154.536:8000/ 上运行它。但是，以下代码在 localhost http://localhost:8080/ 上运行服务器。如何在我的永久 URL 上运行它？我错过了什么吗？让我知道是否需要任何进一步的信息。我是 AWS 新手，请帮帮我。

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

> proto@1.0.0 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" }.

这里是 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"
  }
}

Answer 1

如果您计划在 EC2 实例上托管 SPA，则需要像 Apache 这样的 HTTP 服务器。

1. 关注this guide在EC2上安装apache

2. 在您的本地系统中，构建您的 vue 项目。

   npm run build
   

3. 项目根目录下会生成一个dist/文件夹。

4. 将dist/ 的内容上传到您的EC2 实例上的/var/www/html。

[编辑]为apache添加历史模式支持配置。

对于历史模式，您需要像这样配置服务器：

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

来自这个post。

[编辑]上传dist到EC2实例

从您的项目根目录运行以下命令。

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

[编辑]重启Apache2服务器

sudo service apache2 restart