新手小白:使用docker部署前后端(node.js)分离项目上线(详细)
作者:mmseoamin日期:2024-01-30

目录

1、买个云服务器

2、下载Xshell和Xftp软件

​3、Docker的使用

安装docker

docker中安装mysql

docker中安装redis,我的nodejs项目中用到了redis,所以要配置,如果没有用到的话,可以直接跳过这一步骤,到下一步。

 docker安装node

docker中配置nginx

1、买个云服务器

我用的是阿里云,其他选择还有腾讯云、百度云,根据自己的需求选择。

打开阿里云:https://www.aliyun.com/

没注册的先注册,注册了的直接登录进去。找到免费试用中的云服务器ECS,按需选择云服务器的使用规格,然后单击立即使用。

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第1张

 购买成功后,回到阿里云首页找到ECS控制台,点进去之后就可以看到购买了的云服务器,以及它的详细信息。

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第2张

重置密码

实例-->更多-->密码/密钥-->重置实例密码

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第3张

2、下载Xshell和Xftp软件

Xshell:是终端模拟器软件,支持SSH、Telnet、Serial等协议,可以远程访问服务器、路由器、交换机等网络设备并对它们进行管理和操作。

Xftp:它支持SFTP和FTP协议的文件传输,可以通过图形化界面进行文件管理和传输,即将本地文件上传到服务器或者服务器文件下载到本地等等。

下载地址:Xshell 下载 - NetSarang Website

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第4张

下载成功之后,打开xshell(我一般喜欢用管理员身份运行)

点击新建

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第5张

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第6张

在弹出的窗口输入root

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第7张

填写之前重置的密码

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第8张

 连接成功!

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第9张

如果连接断开,可以双击一下左侧的会话名称

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第10张

 打开xftp

点击新建

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第11张

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第12张

然后在弹出的窗口输入用户名root和密码

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第13张

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第14张

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第15张

连接成功!如果断开了连接,双击一下test就行,绿色小圆圈表示连接成功。

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第16张​ 3、Docker的使用

什么是docker?

        Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源。Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。

docker的官方中文文档:https://www.coonote.com/docker/docker-tutorial.html

如果要详细了解容器技术和docker,可以参考一下这两篇文章

https://baijiahao.baidu.com/s?id=1675253978950340809&wfr=spider&for=pc

 https://zhuanlan.zhihu.com/p/440672717

在连接上了云服务器的xshell上使用docker

安装docker

yum install docker -y

可以通过命令 docker -v查看是否安装成功

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第17张

设置开机启动docker

systemctl start docker

docker中安装mysql

查看mysql镜像

docker search mysql

拉取mysql镜像(默认是最新的)

docker pull mysql
#如果要下载指定版本,docker pull mysql:版本

使用命令docker images查看从 Docker Hub 中提取的 mysql镜像。

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第18张

 启动mysql容器

第一种:
docker run --name mysql-test -d -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysql
命令详解:
# --name 自定义容器名称
# -d 后台运行
# -p 指定映射的端口号
# -e MYSQL_ROOT_PASSWORD=123456 数据库密钥
 
第二种(推荐):
docker run --restart=always --privileged=true -d -v /home/mysql/data:/var/lib/mysql -v /home/mysql/conf:/etc/mysql/conf.d -v /home/mysql/my.cnf:/etc/mysql/my.cnf -p 3306:3306 --name  mysql-test -e MYSQL_ROOT_PASSWORD=123456 mysql
 
--restart=always 代表开启启动
 
--privileged=true 代表进入容器内部为管理员身份
 
-d 表示后台运行容器 并返回容器Id
 
-v 把mysql产生的数据同步到本地 防止数据丢失
 
-e 容器传参  设置mysql的初始密码

 使用docker ps -a查看所有正在运行的容器

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第19张

 如果我们要把本地的数据库的数据同步到mysql容器上,可以使用navicat(没有的话,先去找一个破解版的)上传,顺便测试mysql能否连接。

点击连接,选择MySQL

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第20张

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第21张

连接成功后,选择本地需要同步的数据库,右键-->转储SQL文件-->数据和结构,选择存放路径。

然后右键我们刚连接好的mysql,新建数据库,在新建好的数据库右键运行刚存放好的sql文件,就

实现了本地数据和云数据库数据的同步。当然还有其他方法实现数据同步,有需要的话可以去找一下。

docker中安装redis,我的nodejs项目中用到了redis,所以要配置,如果没有用到的话,可以直接跳过这一步骤,到下一步。

查看redis版本

docker search redis

拉取redis镜像,默认最新

docker pull redis

查看是否拉取成功

docker images

挂载配置文件

# 创建文件夹redis

 mkdir -p /home/docker/redis

# 创建文件

touch /home/docker/redis/redis.conf

在xftp中可以看到 

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第22张

右键redis.conf进行编辑,复制下面内容,并且保存。如果想看比较全的redis.conf可以去redis官网下载。

# Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程

daemonize no

# 指定Redis监听端口,默认端口为6379

port 6379

# 绑定的主机地址,不要绑定容器的本地127.0.0.1地址,因为这样就无法在容器外部访问

bind 0.0.0.0

#最好设置密码,比较安全,否则有风险

requirepass 123456

# 持久化

appendonly yes

启动并运行redis容器

docker run -d --name redis --restart=always -p 6379:6379 -v /home/docker/redis/redis.conf:/etc/redis/redis.conf -v /home/docker/redis/data:/data  redis redis-server /etc/redis/redis.conf --appendonly yes  --requirepass 123456

# 参数解析

–name: 给容器命名;

--restart=always :开机启动,失败也会一直重启;

-p 6379:6379: 将宿主机6379端口与容器内6379端口进行映射;

-v:将宿主机目录或文件与容器内目录或文件进行挂载映射;

-d:redis 表示后台启动redis

–appendonly yes:开启redis 持久化;

–requirepass 123456 设置密码为123456

redis-server: 以配置文件启动redis,加载容器内的conf文件;

查看启动状态

docker ps -a | grep redis

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第23张

 docker安装node

拉取node镜像,默认最新

docker pull node

# docker pull node:版本(指定版本)

查看是否拉取成功

docker images

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第24张

创建存放node项目的文件夹 

 mkdir -p /app_node

# 切换到该目录下

cd /app_node

打开本地的node项目,创建Dockerfile和.dockerignore文件

Dockerfile文件写入,然后保存

FROM docker.io/node  

#在镜像容器中创建目录  

RUN mkdir -p /home/app_node 

#将此目录设为工作目录    

WORKDIR /home/app_node 

#将该目录下的所有文件拷贝到镜像容器中

COPY . /home/app_node

#重新安装依赖            

RUN npm install    

#保持和启动node服务的端口号一致                       

EXPOSE 3000

CMD [ "node", "./app.js" ]

 

.dockerignore文件写入,然后保存

Dockerfile

.git

.gitignore

.config

.npm

.vscode

node_modules

package-lock.json

README.md

注意node项目中数据库

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第25张

注意如果使用了redis,redis的连接要改成这样,如果没有,跳过。

const client = redis.createClient({

    host: '服务器的ip',

     port: 6379, 

    requirepassword: '123456' #配置redis的时候配置的密码

 });

打开xftp进行文件传输

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第26张

在xshell中我们可以通过 ls -a  看到所有的文件,前提是我们已经用cd /app_node命令切到该目录下

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第27张

 在该项目的根目录下构建镜像容器

docker build -t appservice . 

查看镜像是否构建成功

docker images

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第28张

启动容器

docker run -p 3000:3000 appservice

docker中配置nginx

拉取nginx镜像,默认最新

docker pull nginx

 查看拉取的镜像是否成功

docker images

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第29张

 创建文件

mkdir -p /home/nginx

mkdir -p /home/nginx/conf

mkdir -p /home/nginx/html

mkdir -p /home/nginx/logs

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第30张

创建并运行nginx容器

docker run -d --name nginx -p 80:80 -p 443:443 nginx:latest

查看是否运行成功,并进行文件映射,就是容器的id

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第31张

docker cp :/etc/nginx/nginx.conf /home/nginx/

docker cp :/etc/nginx/conf.d /home/nginx/conf/

docker cp :/usr/share/nginx/html /home/nginx/html

docker cp :/var/log/nginx/ /home/nginx/logs/

拷贝之后,可以看到 

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第32张

然后需要停止运行容器,并删除容器

docker stop  

docker rm  

重新创建nginx容器

docker run -d  --name nginx -p 80:80 -p 443:443 -v /home/nginx/nginx.conf:/etc/nginx/nginx.conf -v /home/nginx/logs:/var/log/nginx -v /home/nginx/html:/usr/share/nginx/html -v /home/nginx/conf:/etc/nginx/conf.d --privileged=true  nginx:latest

查看运行状况

docker ps -a

修改nginx配置文件defalut.conf,进行编辑

 新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第33张

server {

    listen       80;

    listen  [::]:80;

    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    location / {

        root   /usr/share/nginx/html;

        index  index.html index.htm;

       # 防止刷新出现404

        try_files $uri $uri/ /index.html;

    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html

    #

    error_page   500 502 503 504  /50x.html;

    location = /50x.html {

        root   /usr/share/nginx/html;

    }

     # 代理转发请求至网关,prod-api标识解决跨域,线上接口地址,注意后面/

    location /prod-api/ {

        proxy_pass http://${服务器ip}/;

    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80

    #

    #location ~ \.php$ {

    #    proxy_pass   http://127.0.0.1;

    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

    #

    #location ~ \.php$ {

    #    root           html;

    #    fastcgi_pass   127.0.0.1:9000;

    #    fastcgi_index  index.php;

    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;

    #    include        fastcgi_params;

    #}

    # deny access to .htaccess files, if Apache's document root

    # concurs with nginx's one

    #

    #location ~ /\.ht {

    #    deny  all;

    #}

}

 复制之后着重注意这一部分,需要将${服务器ip}改成自己的云服务器的ip

 # 代理转发请求至网关,prod-api标识解决跨域,线上接口地址,注意后面/
    location /prod-api/ {
        proxy_pass http://${服务器ip}/;
    }

在本地打开前端项目,进行打包,我的项目是通过pnpm build,得到一个dist文件

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第34张

重启nginx容器

docker restart nginx(名称或者它的容器id) 

然后就可以通过ip地址访问自己的项目了!

如果要通过域名去访问的话,

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第35张

 挑选一个,并看对应的试用教程。

使用域名访问网站,需要进行备案,备案的话,大概需要四五天,可以看看相关的流程如果有需要的话。

新手小白:使用docker部署前后端(node.js)分离项目上线(详细),第36张