vue+nodejs项目在服务器实现docker部署

申请一台服务器

我的是一个2+2的linux的小服务器

配置docker

卸载原有的docker

复制代码

yum remove docker \
                  docker-client \
                  docker-client-latest \
                  docker-common \
                  docker-latest \
                  docker-latest-logrotate \
                  docker-logrotate \
                  docker-selinux \
                  docker-engine-selinux \
                  docker-engine\

切换成阿里源

复制代码

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

下载yum

复制代码

yum install -y yum-utils

下载docker

复制代码

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

设置为开机自启动

复制代码

systemctl enable docker

配置镜像加速器

在阿里云获取镜像加速器

------------>登录进入容器镜像服务

重启docker

复制代码

# 重新加载配置
systemctl daemon-reload
 
# 重启Docker
systemctl restart docker

MySQL部署

拉取sql镜像并创建容器命令------在后台执行sql容器

复制代码

docker run -d \
  --name mysql \
  -p 3307:3307 \
  -e TZ=Asia/Shanghai \
  -e MYSQL_ROOT_PASSWORD=ZLY@@ \
  mysql:5.7

服务器添加安全组

使用本地图形化sql链接即可

剩下的导入我方数据库即可

node.js部署服务器

修改node代码

复制代码

app.listen(3000, '0.0.0.0', () => {
  console.log('server is running at http://localhost:3000');
})

编写dockerfile

复制代码

# 使用官方 Node.js 镜像作为基础镜像
FROM node
 
# 设置工作目录
WORKDIR /app
 
# 复制 package.json 和 package-lock.json 到工作目录
COPY package*.json /app
 
# 将npm源设置为淘宝镜像
RUN npm config set registry https://registry.npmmirror.com/
 
# 安装项目依赖
RUN npm install
 
COPY . /app
 
# 暴露端口
EXPOSE 3000
 
# 容器启动命令
CMD ["npm", "run", "start"]

编写nginx.conf

复制代码

events {
    use epoll;
    worker_connections 65535;
    multi_accept on;
}
 
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
 
    server {
        listen 9090;
        server_name localhost;
 
        location / {
            root /usr/web/dist;
            index index.html index.htm;
            try_files $uri$uri/ /index.html;
            proxy_pass http://localhost:3000; # 确保这里代理到的是3000端口
        }
 
        # 其他的location块或者其他配置
    }
}

推送到服务器上

拖过来

制作镜像

复制代码

docker build -t node-app .

创建容器并启动

最好使用第一个： 因为 --restart=always是检测到异常重启docker容器，将后端的可容性大大提升

复制代码

docker run -d -p 3000:3000 --restart=always --name nodeai node-app

docker run -d -p 3000:3000 node-app

可以查看重启的次数

复制代码

docker inspect -f '{{.RestartCount}}' nodeai

启动成功

开放安全组

访问一下看看

一定要设置安全组

成功

没问题了

vue部署服务器

修改前端代码

打包

复制代码

pnpm build

记得删除依赖

编写dockerfile

复制代码

FROM nginx
# FROM node
LABEL Author='WYN'
COPY dist /usr/web/dist
COPY nginx.conf /etc/nginx/nginx.conf  
CMD ["nginx", "-g", "daemon off;"]

编写nginx.conf

复制代码

events {
 
	use epoll;
	
	worker_connections 65535;
	
	multi_accept on;
 
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    # 这里是其他http相关的配置，比如upstream定义等
 
    server {
        listen 9090;
        server_name localhost;
 
        location / {
            root /usr/web/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        # 还可以有其他location块或者其他配置
    }
    # 
}

推送到服务器上

// 记得删除依赖！！！！

构建镜像

复制代码

docker build -t yya .

运行容器

复制代码

docker run -d -p 9092:9090 yya

开放安全组

完成