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