前提条件
要在群晖nas部署项目首页要拥有一个群辉nas服务器，vue+node项目，其他根据不同的语言配置类似 我使用的是 群辉nas923+
我使用的是 群辉nas923+
1.打包本地vue项目
注意 vue接口地址要更换为部署在群辉接口地址
2.打包本地node后台项目
需要修改数据库连接配置，因为之前使用是mysql数据库，现在更换为群辉的数据库
群辉上面数据库为MariaDB 10 +phpMyAdmin两个软件搭建的在群辉商店安装即可
3.在群辉创建文件夹
我推荐在web这个文件夹（这个文件夹我通常就放了一些自定义的网站），可以安装web station这个套件，配置一些自定义网站
创建一个项目文件 web_item，然后创建一个前端文件夹，例如 vue,一个后台文件夹 server
4.现在把本地文件放到群辉文件夹中
把本地打包文件放到群辉各自文件夹中，后台不需要打包，直接放到服务器之中即可
5.准备Dockerfile和nginx配置文件
在docker中部署vue项目, 需要使用到nginx. vue项目在build之后生成的dist目录下是静态资源, 使用nginx作为代理服务器来访问静态资源.
1.进入到nas中刚刚创建的vue下, 创建nginx文件夹, 用于存放nginx配置文件.
2.进入到nginx文件夹, 创建文件 default.conf
server {
# 配置nginx监听的端口, 4444是上面我们前端项目设置的端口
listen 4444;
server_name localhost;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
# 配置跟路径为容器下的 /usr/shar/nginx/html
# 稍后要把dist文件放入到配置的这个路径下
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location = /50x.html {
root /usr/share/nginx/html;
}
} 3.继续在nginx目录下, 创建nginx.conf
# 这一行是最为重要的, 默认user是nginx的, 这里我们要调整成root
# 否则后续启动, 在访问前端项目时页面会出现403,
查看容器日志发现是因为nginx的权限问题,
报错的 Permission denied
user root;
#下面内容无需过于关注, 都是我从nginx服务器拷贝下来的
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
#tcp_nopush on;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}4.这两个文件准备好后, 回到上一级目录下, 即vue下, 创建Dockerfile并编辑
# 引入nginx
FROM nginx
# 将当前路径下nginx的两个配置文件添加到容器的指定路径下
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
# 将本地当前路径下打包后的dist 添加到容器nginx路径下,
这个路径就是我们在nginx的default.conf中配置的路径
COPY ./dist /usr/share/nginx/html/到这里前端项目就准备完成了.
6.在docker上对前端进行构建
1.群辉首先要安装上docker套件, 安装非常简单, 点点就ok了.
注意：现在群辉docker改为container Manager
2.打开群辉的ssh功能
可以在控制面板-连接性-终端机和SNMP看到关于ssh的配置打开SSH 并设置端口
勾选上 "启用SSH功能", 设置一下你想使用的端口. 点击 "应用"就ok了
3.通过ssh连接到nas
打开PuTTY 连接nas
输入密码后, 就可以进入到群辉的终端了
密码输入时看不见，复制密码右键粘贴回车即可
4.找到并进入我们创建的前端文件夹vue路径
群辉的共享文件夹路径都是在/volume 下, 多个磁盘会是volume1 / volume2 以此类推
> cd /volume1/web/web_item/vue/
# ls -l 看一下路径下文件是否正确
ls -l
# 列出如下文件, 证明我们进入的路径是没问题的
# dist
# Dockerfile
# nginx5.构建docker镜像
在vue路径下执行以下命令
# 需要使用sudo执行 -t 镜像名字:标签
sudo docker build . -t web:v1.0执行成功后, 通过docker images查看镜像是否构建成功
sudo docker images成功输出了我们刚才构建的镜像,
通过群辉docker容器套件也能看到我们的容器, 可以看到
docker也帮我们拉取了nginx的镜像
6. 启动docker镜像
# 执行docker run命令
# -p 8088:8088 把容器的4444端口映射到nas的4444端口 之后我们就可以通过8088端口访问访问前端项目了
# --name 容器名称 使用镜像
sudo docker run -p 4444:4444 -d --name web web:v1.0执行成功后, 在群辉docker套件里也看到了web:v1.0容器已经在运行了
7.测试前端项目
成功运行，之后可以配置ddns实现外网访问
温馨提示
如果容器运行出现问题，一般会是静态资源找不到, 或者nginx的权限问题. 可以再对照上面的配置确认一下.注意端口和文件夹
8.配置后端项目
1.在MariaDB创建项目数据库，本地mysql数据导出，在MariaDB导入，就会自动配置创建数据库（注意数据导出，可以选导出结构和数据）
2.配置
FROM node:18.18.0
# 设置工作目录
WORKDIR /usr/src/app
# 安装应用依赖项
# 通配符用于确保两个包。json和package-lock。Json被复制
# where available (npm@5+)
COPY package*.json ./
RUN npm install
# 如果您正在构建用于生产的代码
# RUN npm ci --only=production
# 复制应用代码到容器中
COPY . .
# 端口
EXPOSE 3333
CMD [ "npm" ,"start" ] 3.后端打包启动
sudo docker build . -t server:v1.0
sudo docker run -p 3333:3333 -d --name server server:v1.04.测试运行
数据成功展示
