使用Docker + ec2 + nginx + Next.js搭建环境，将Web应用程序发布

2 年 ago
文, 翔
2 minutes

首先

    • タイトルの通りの環境を構築したい

 

    • 色々苦戦したので、その時のメモ

 

    エンジニア歴半年の備忘録

版本（截至2023年10月6日最新）

    • AWS EC2 t2.micro + Ubuntu 22.04 LTS

 

    • Docker 24.0.6

 

    • docker-compose 2.21.0

 

    • nginx 1.18.0

 

    Next.js 13

继续努力下去

在中国境内搭建EC2环境。

由于已经完成，所以请从这边开始吧。

这次我正在使用VScode通过SSH连接（因为GUI更方便实用）。

另外，请确保将HTTP（端口号80）打开。

 

由于AWS EC2上的Ubuntu没有默认的root用户密码，因此在这种情况下最好设置一个密码（也可以使用sudo来绕过）。

    • 一般ユーザでログイン

sudo su – でrootユーザーに変更

passwd コマンドでnew passwordを設定

就这样。

请阅读以下参考材料：

 

安装Docker和docker-compose

这很简单。

只需按照以下顺序执行。

// 更新とインストール
$ sudo apt-get update

$ sudo apt-get install

// GPGキーを保存するディレクトリを作成
$ sudo mkdir -p /etc/apt/keyrings

// GPGキーを取得
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

// Dockerリポジトリをとってくる
echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

// ここで改めて更新
$ sudo apt-get update

// 最後にインストール
$ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose-plugin

在进行简单的测试之前，我们会确保任何权限用户都能够执行该测试。

// ユーザーをDockerグループに追加
$ sudo usermod -aG docker $USER

// 設定を変更
$ sudo su - ${USER}

我将检查版本并打印“Hello world”来确认。

// バージョン確認
$ docker -v

// 動作確認
$ docker run hello-world

如果下面这些存在，就表示成功了！

スクリーンショット 2023-10-06 2.41.33.png

我会安装docker-compose。

// インストール
$ sudo apt install docker-compose-plugin

// 確認
$ docker compose version

来源：参考资料

 

Next.js和Docker的设置

只需要在这里放入想要使用的框架，然后启动Docker容器。这次我们将以Next.js作为例子，快速设置。

Next.js的启动

$ npx create-next-app nextjs-docker-app
$ cd nextjs-docker-app

在根目录下创建Dockerfile。

# ベースイメージとして公式のNode.jsを使用
FROM node:16-alpine

# アプリケーションのディレクトリを作成
WORKDIR /app

# 依存関係のコピーとインストール
COPY package*.json ./
RUN npm install

# アプリケーションのソースをコピー
COPY . .

# アプリケーションをビルド
RUN npm run build

# ポート3000でアプリを起動
EXPOSE 3000
CMD ["npm", "start"]

建筑物

$ docker build -t nextjs-docker-app .

启动容器

$ docker run -p 3000:3000 nextjs-docker-app

虽然很简单，但只要能在EC2内传递给本地主机，任何方法都可以。

逐步进行Nginx的配置

首先，我们需要安装Nginx本身。

sudo apt update
sudo apt install nginx

nginx通常存储在/etc/nginx目录中。

因为没有root用户权限，所以没有写入权限，必须调整权限或者每次都要使用sudo（很麻烦）。

让我们只专注于以下要点吧。

/etc/nginx/nginx.conf：メイン設定ファイル、値の最大値など色々変更できる

/etc/nginx/sites-available/：ここを主に変更することで設定する

/etc/nginx/sites-enabled/：有効化された設定（のリンク）が保存される

简单来说，只需将设置保存并激活于sites-available目录中。

让我们实际去尝试一下！

我会创建一个名为my-nestjs-app的配置文件。

$ sudo nano /etc/nginx/sites-available/my-nextjs-app

顺便提一下，在按下Ctrl + X后，通过按Y，然后按Enter键就可以保存nano。

这次将使HTTP访问成为可能。

以下内容简要概括如下，

    • 80番ポートでアクセス可能

 

    立ち上がっているlocalhost3000をドメイン名やIPと結びつけて公開

感覺就是這樣。太簡單了〜〜〜〜

server {
    listen 80;

    server_name [ここにドメイン名やIPなど];

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

启用设置（创建符号链接）。

$ sudo ln -s /etc/nginx/sites-available/my-nextjs-app /etc/nginx/sites-enabled/

让我们进行简单的语法检查。

$ sudo nginx -t

只要按照以下的格式出现没有错误，就可以了。

syntax is okay
test is successful

我会重新启动nginx。

$ sudo systemctl restart nginx

请原生地用中文解释以下内容，只需要一个选项 ：
http://[IP或域名]/

让我们尝试通过浏览器访问！

如果你能够看到常见的Next.js首页，那么配置就完成了。辛苦了！

赠品

搭建CI / CD环境以便于开发。

直接使用EC2进行SSH开发也是有趣的，但太他妈累了。

如果你对使用Github Action在构建CI / CD方面感兴趣的话，以下内容可以供你参考（非常方便）。

 

bannerAds