AWS：将 node.js 应用程序传递给 EC2 的步骤

Question

我是 AWS 的新手，我正在使用 node.js 和 react.js 开发一个 Web 应用程序。我的应用程序在我的笔记本电脑上运行良好，但我想将其上传到 AWS EC2。

当我在笔记本电脑中模拟生产环境时，我有一个 /dist 文件夹，其中包含前端的所有代码，服务器代码位于 /src/server 文件夹中。

我已将我的应用程序上传到 EC2，现在我对接下来的步骤有点迷茫。

首先，我想知道是否有任何方法可以仅在未安装模块的情况下下载它们 其次，我想知道在这种环境中是否必须使用 babel，因为在我进行开发的所有教程中，这些模块总是像开发依赖项一样安装。那么，现在是否必须将所有 babel 模块移至依赖项？现在，我对这两个步骤的脚本是：

npm -i --production && cross-env NODE_ENV=production babel-node src/server/server.js

如果我将 babel-node 更改为节点，那么“import”命令会出错，因为我没有使用 babel。

我的脚本是：

是否可以像我为前端代码而不是服务器代码进行构建？我该怎么做？

第四，将监听 api 调用的服务器将是节点服务器，当我完成正确地制作我的 aws-start 脚本时，这将得到。但是......哪个是前端页面服务器的最佳选择？

抱歉，我有太多问题，因为这是我在 AWS 中的第一个应用程序。

编辑我：

在构建代码时遵循@Corrie MacDonald 的明智建议，我得到了以下文件和文件夹：

接下来，我修改我的 aws-start 脚本：

npm i --production && cross-env NODE_ENV=production node dist/assets/js/bundle.js

但是，我遇到了这个错误：

我做错了什么？

编辑二：

我的 webpack.config.babel.js 文件是：

import path from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
import MiniCssExtractPlugin from "mini-css-extract-plugin";

const devMode = process.env.NODE_ENV !== "production";

console.log("devMode: " + devMode);


module.exports = {
    entry: "./src/client/index.js", //set entry file

    // Resolve to output directory and set file
    output: {
        path: path.resolve("dist/assets"),
        filename: "js/bundle.js",
        publicPath: "/assets"   //It's mandatory to define this publicPath to get access to the website when we reload pages
                                //or we access to them directly with url's which have directories of second level like 
                                //http://localhost:4000/directory-level-1/directory-level-2
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/client/index.html",    //where is our template
            filename: "../index.html",              //where we are going to put our index.html inside the output directory
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }            
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.css",
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }             
        })
    ],
    //It help us to detect errors. 
    devtool: "source-map", 
    // Set dev-server configuration
    devServer: {
        inline: true,
        contentBase: './dist', 
        port: 3000,
        historyApiFallback: true
    },

    // Add babel-loader to transpile js and jsx files
    module: { 
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use:[
                    { 
                        loader: "babel-loader",
                        query: {
                            presets: [
                                "@babel/preset-react"
                            ]
                        }
                    }
                ]
            },
            {
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader, 
                    "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/images/",
                    outputPath: "./images/"
                }
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000,
                    publicPath: "/assets/fonts/",   //It's mandatory to get access to the fonts when we reload pages or access directly
                    outputPath: "./fonts/"
                }
            }
        ]
    }

}

编辑三：

这是我的开发环境的文件夹：

当我进行构建时，您如何看到我使用前端代码创建了 /dist 文件夹，但我的服务器代码仍在 /src/server 文件夹中。如何为我的服务器代码创建 /dist 文件夹？这可能吗？

Answer 1

在不详细介绍自动化构建程序的情况下，步骤通常如下：

• 构建代码 -- 在这里，您的源代码被构建并转译为可分发的格式，该格式通常进入dist/ 文件夹。

• 上传您的可分发代码。 -- 在这里，您构建的所有文件都应该（手动或自动）上传到您的 EC2 实例。

• 运行启动脚本 -- 在这里，任何项目启动代码都应该运行才能真正启动您的服务器。

您不需要在生产环境中使用 babel，因为此时您的项目应该已经构建好了。但是，如果您在 EC2 实例上构建，而不仅仅是上传您的 dist，那么您将需要它。

为了将您的 EC2 变成一个可路由、可访问的 Web 服务器，您需要在 AWS 上配置一些安全和路由策略。您需要确保实例具有可路由的 IP（或者您可以使用 AWS 提供的自动生成的 DNS）。其次，您需要确保您的安全策略允许端口 80（至少，以及您需要与服务器交互的任何其他端口 - 用于 HTTPS、SSH 或其他）。

一旦你把这一切都准备好了，你应该会很好。

编辑

如果您想提供静态 HTML 页面，您必须确保已将 EC2 容器设置为具有 Apache 之类的 Web 服务器。但是，我建议您仅从服务器运行您的 Node Server，并将您的静态 webpack 包作为静态网站托管在 S3 上。

编辑 2

• 这里介绍了如何为节点设置 EC2 实例。 - https://medium.com/@nishankjaintdk/setting-up-a-node-js-app-on-a-linux-ami-on-an-aws-ec2-instance-with-nginx-59cbc1bcc68c
• 这里介绍使用 S3 建立静态网站。 - https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteHosting.html