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

如果我为 node 更改 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