纯前端项目文件部署到远程服务器

背景：由于电脑一直因为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

五、参考

本地项目部署到服务器——docker-nginx - 云+社区 - 腾讯云

一篇文章带你学会如何使用 docker 实现主机和容器的目录挂载_南淮北安的博客-CSDN博客_docker挂载