如何在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，则需要一个 HTTP 服务器，例如Apache。

1. 按照本指南在 EC2 上安装 apache

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

   npm run build
   

3. dist/将在项目根目录中生成一个文件夹。

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

[编辑]添加 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>

从这个帖子。

[编辑]将 dist 上传到 EC2 实例

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

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

[编辑]重新启动 Apache2 服务器

sudo service apache2 restart