服务器中用docker安装nginx镜像同时部署vue项目

最新推荐文章于 2024-08-07 14:22:19 发布

yanwuhc

最新推荐文章于 2024-08-07 14:22:19 发布

阅读量457

点赞数

分类专栏： nginx 文章标签： docker nginx vue

本文链接：https://blog.csdn.net/weixin_44303404/article/details/113523794

版权

nginx 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

由于项目需要部署到服务器上面，这两天捣鼓了一下docker和nginx，给我最大的感觉对linux更加熟练了…（之前完全没有接触过linux）。期间真的踩了很多坑，在这里吐槽一下…然后简单描述一下怎么利用docker安装nginx部署vue项目。

1.登录服务器，同时安装docker。

docker安装我用了简单粗暴的一键安装：

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

可以参考菜鸟教程，上面的安装都很详细，这里一笔带过。

参考链接：https://www.runoob.com/docker/ubuntu-docker-install.html

2.拉取nginx镜像。

为了拉取镜像的速度可以更快一点，可以使用阿里云服务器的代理，具体方式可以参考

https://blog.csdn.net/wohaqiyi/article/details/89335932

使用到阿里云服务器代理后，开始拉取镜像：

docker pull nginx

拉取完毕后，通过docker images查看是否拉取了镜像。

3.进行docker结合nginx测试（这一步是为了检查nginx是否能够在服务器中运行成功）

输入命令

docker run -d -p 8080:80 --name my-nginx nginx

解释一下命令的含义：

-d 		----在后台持续运行
-p 		----指定端口号
--name  ----指定容器的名称（如果没有这个命令，docker将随机命名）
nginx	----使用nginx镜像

接着终端会出现一串东西，这串东西是docker容器的id。

使用docker ps可以查看容器是否运行着。（docker ps -a查看所有的容器）

如果容器运行着，在浏览器输入服务器ip地址:8080，如果正常的话，会跳转到nginx的起始页面，说明nginx在服务器上已经跑起来了。

注意：在使用8080端口的时候，一定要注意防火墙的设置以及服务器的安全组有没有默认放开，根据自己的需要指定。

4.进行相关文件的映射（这步真的很重要…）

映射是镜像中的文件，映射到服务器我们熟知的位置中，当服务器的文件发生改变的时候，镜像中的文件也会发生变化，方便我们修改，尤其是配置文件。

首先创建一些相关的文件夹（文件结构如下）：

home
	yanwuhc
		nginx
			conf.d
			html
			log

相关linux命令：

vi default.conf在当前文件下创建default文件同时编辑。

进入之后：

i进入编辑状态

esc退出编辑状态

:wq保存并退出

同时，我们要在html文件夹中创建一个index.html文件，内容可以是随意，用作测试。

<html>
    <body>
        <h1>
            hello world！
        </h1>
    </body>
</html>

接着是映射，把镜像中的conf文件和html映射出来：

docker run -d -p 80:80 --name my-nginx 
-v /home/yanwuhc/nginx/conf.d:/etc/nginx/conf.d 
-v /home/yanwuhc/nginx/html:/usr/share/nginx/html 
-v /home/yanwuhc/nginx/log:/var/log/nginx nginx

快捷复制：

docker run -d -p 80:80 --name my-nginx -v /home/yanwuhc/nginx/conf.d:/etc/nginx/conf.d -v /home/yanwuhc/nginx/html:/usr/share/nginx/html -v /home/yanwuhc/nginx/log:/var/log/nginx nginx

/etc/nginx/conf.d和/usr/share/nginx/html和/var/log/nginx是nginx镜像的默认路径。

这里我用80端口作映射，因此在映射前需要检查80端口是否被容器占用，如果是的话要先停掉相关的容器。

docker ps   找到占用80端口的容器的id或者名字
docker stop 容器的id或者名字

映射完成后，打开浏览器输入服务器的ip，可以看到测试index.html显示出来了。

5.项目的正式部署。

前面在只是服务器的一些准备工作和相关测试，下面是重点。首先在本地打包好自己的项目，生成dist文件上传到服务器中，位置可以任意，我选择了上传到之前的html文件下面。

npm run build