背景:由于电脑一直因为vue版本的问题一直出问题,所以这个项目未使用vue,看了网上很多人的帖子都是关于将vue前端项目上传到服务器,故今天把自己未使用vue的前端项目部署到服务器的步骤记录下来。
一、前提工作
1、利用Transmit软件将本地电脑的前端项目文件上传到远程服务器;
也或者可以使用终端将文件上传到远程服务器;
xxx@MacBook-Pro ~ % sudo su 回车 # 进入本机根目录
$ scp -P 22 本地文件地址 服务器名称@IP:需要上传到的服务器地址
2、利用软件或者终端登录远程服务器,我是直接在mac的终端直接登录的;
XXX@MacBook-Pro ~ % sudo su 回车 # 进入本机根目录
sh-3.2# ssh -p 端口 服务器账号@远程服务器地址
3、Docker安装
$ curl-fsSL https://get.docker.com | bash -s docker --mirror Aliyun # docker安装
$ sudo systemctl start docker # 启动docker
$ docker pull nginx:latest # docker安装nginx
$ docker images # 查看是否安装成功
二、直接部署
1、创建docker nginx 实例
$ docker run --name="city-nginx" -p 9090:80 -d nginx
2、查看容器的运行状态
$ docker ps
3、拷贝之前上传到服务器的文件到容器内部
$ docker cp 服务器文件目录 265e2beaacdd:/usr/share/nginx/html/
4、修改配置文件 default.conf
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html/City/src/city;
index index.html index.htm;
}
#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;
}
# 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;
#}
}
就是更改了location;
5、测试访问
三、Docker 数据卷挂载部署
前面步骤都是一样,只是在创建实例的时候加了数据卷的挂载。用数据卷挂载以后 /var/lib/docker/volumes/juming-nginx/_data 目录就会和容器内部的 /etc/nginx 目录对上,此后在宿主机的目录更改之后,容器内部会做同样的改变
(base) root@ubuntu:/var/lib/docker/volumes/test-nginx/_data $ docker run -d --name=digitaltwin-nginx -p 9898:80 -v juming-nginx:/etc/nginx nginx
da28ded5db00bb0199e5bbcc0c5e981a45b6ed1cf469389c9611552cfc7df785
(base) root@ubuntu:/var/lib/docker/volumes/test-nginx/_data $ docker volume inspect juming-nginx
[
{
"CreatedAt": "2021-09-30T02:20:58-07:00",
"Driver": "local",
"Labels": null,
"Mountpoint": "/var/lib/docker/volumes/juming-nginx/_data",
"Name": "juming-nginx",
"Options": null,
"Scope": "local"
}
]
(base) root@ubuntu:/var/lib/docker/volumes/test-nginx/_data $ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
da28ded5db00 nginx "/docker-entrypoint.…" 17 seconds ago Up 17 seconds 0.0.0.0:9898->80/tcp, :::9898->80/tcp digitaltwin-nginx
四、利用Dockerfile部署
1、将本地电脑的项目文件和Dockerfile、nginx.conf 上传到服务器的目录
2、Dockerfile文件
FROM nginx
VOlUME ["jumping-nginx"]
RUN mkdir /usr/share/nginx/City # 在nginx镜像内新建City文件夹
# RUN mkdir /usr/share/nginx/City
RUN rm -rf /etc/nginx/nginx.conf # 在nginx镜像内删除/etc/nginx目录下的nginx.conf文件
COPY ./nginx.conf /etc/nginx/nginx.conf # 将宿主机本目录nginx.conf复制到镜像/etc/nginx/nginx.conf
COPY ./City /usr/share/nginx/City # 将宿主机本目录下的文件夹复制到镜像/usr/share/nginx/City目录
EXPOSE 9898 # 开放端口9898,这个端口是容器内的端口,只是声明,并没有打开,还需要在docker run 的时候 -p或者-P打开
3、default.conf修改的地方
Server{
listen 9898
root /usr/share/nginx/City/src/city
}
4、build镜像
$ docker build -t digitaltwin .
在有Dockerfile的目录下进行操作。若是名字不是Dockerfile,需加上dockerfile的名字;
5、启动镜像
$ docker run -d --name=city -p 9898:9898 -v juming-nginx:/etc/nginx digitaltwin